我想让整个 HTML block 可拖动，而不仅仅是文本或图像，所以我想出了这个:http://jsfiddle.net/8D7YK/
当我释放鼠标按钮时，拖动结束事件不会触发。 drop 事件也不会。你知道为什么吗？
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
最佳答案
脚本在您的 dragend 事件中停止
var data = e.dataTransfer.getData('text/html');
线。我尝试在它工作之前和之后放置一些警报，在它工作之前，但不在它之后。
关于JavaScript - 拖动和放置事件未触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16119435/