的JavaScript - dragend拖放事件不觸發

我想使整個HTML塊可拖動的，而不僅僅是文字或圖像，所以我來過了這個：http://jsfiddle.net/8D7YK/的JavaScript - dragend拖放事件不觸發

拖動結束事件將不會觸發時我釋放鼠標按鈕。放棄事件也不會發生。你知道爲什麼嗎？

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>

感謝您的幫助！

PS：我不打算使用jQuery UI

來源

2013-04-20 Virus721

對不起，我改變它只是爲了測試，但dragend不起作用。 – Virus721 2013-04-20 11:28:02

無法重現。用固定的dragstop - > dragend使用Opera。 – TNW 2013-04-20 11:31:59

這段代碼是否在opera上工作？：o 我使用waterfox實際上，可能只是一個bug ... – Virus721 2013-04-20 11:32:49

在

var data = e.dataTransfer.getData('text/html');

線的dragend事件中的腳本將停止。我試圖在發佈之前和之後發佈一些提醒，但發佈之前卻沒有發佈。

來源

2014-02-13 13:19:27 bulanmaster

是的，那些是jQuery事件對象，所以要訪問您應該做的原始事件對象：var data = e.originalEvent.dataTransfer.getData（'text/html'）; – stephband 2014-05-08 07:11:35

的JavaScript - dragend拖放事件不觸發

回答

相關問題