jquery - JavaScript - dragend and drop events not firing -
i want make whole html blocks draggable, not text or images, i've come : http://jsfiddle.net/8d7yk/
the drag end event won't fire when release mouse button. neither drop event. know why ?
css :
html * { margin: 0; padding: 0; } table { position: relative; } td { padding: 5px; background: #ddf; } js :
(function($) { $(document).ready(function() { var $this; var mousemovehandler = function(e) { $this.css('position', 'fixed') .css('top', e.pagey - $this.height() / 2) .css('left', e.pagex - $this.width() / 2); }; $('td').on({ dragstart: function(e) { $this = $(this); $(window).bind('mousemove', mousemovehandler); }, dragenter: function(e) { alert('dragenter'); }, dragleave: function() { alert('dragleave'); }, dragover: function(e) { e.preventdefault(); // chrome / safari alert('dragover'); }, drop: function(e) { alert('drop'); }, dragend: function(e) { var data = e.datatransfer.getdata('text/html'); $this.html($(this).html()); $(this).html(data); $(window).unbind('mousemove', mousemovehandler); }, click: function() { } }); }); })(jquery); html :
<!doctype html> <html> <head> </head> <body> <table> <tr> <td draggable="true">text_00</td> <td draggable="true">text_01</td> <td draggable="true">text_02</td> <td draggable="true">text_03</td> <td draggable="true">text_04</td> </tr> <tr> <td draggable="true">text_10</td> <td draggable="true">text_11</td> <td draggable="true">text_12</td> <td draggable="true">text_13</td> <td draggable="true">text_14</td> </tr> <tr> <td draggable="true">text_20</td> <td draggable="true">text_21</td> <td draggable="true">text_22</td> <td draggable="true">text_23</td> <td draggable="true">text_24</td> </tr> <tr> <td draggable="true">text_30</td> <td draggable="true">text_31</td> <td draggable="true">text_32</td> <td draggable="true">text_33</td> <td draggable="true">text_34</td> </tr> <tr> <td draggable="true">text_40</td> <td draggable="true">text_41</td> <td draggable="true">text_42</td> <td draggable="true">text_43</td> <td draggable="true">text_44</td> </tr> </table> </body> </html> thanks !
ps : i'm not planning use jquery ui
the script stops inside dragend event @ the
var data = e.datatransfer.getdata('text/html'); line. tried put alerts before , after , well, before it's working, not after it.
Comments
Post a Comment