javascript HTML 5 拖动事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11529788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML 5 drag events
提问by jamie holliday
I am trying to build a reorderable list in JS and HTML. (trying to do it without using jQuery ui ) I can't seem to figure out why only the dragstart and dragend events fire when a list item is dragged. Anyone know why the other events not firing?
我正在尝试在 JS 和 HTML 中构建一个可重新排序的列表。（尝试在不使用 jQuery ui 的情况下执行此操作）我似乎无法弄清楚为什么在拖动列表项时仅触发 dragstart 和 dragend 事件。有谁知道为什么其他事件没有触发？
<ul>
<li draggable="true" class="drag">1111111</li>
<li draggable="true" class="drag">222222</li>
<li draggable="true" class="drag">333333</li>
<li draggable="true" class="drag">444444</li>
</ul>
<script type="text/javascript">
var drags = document.querySelectorAll('.drag');
[].forEach.call(drags, function(drag) {
drag.addEventListener('dragstart', handleDragStart, false);
drag.addEventListener('dragenter', handleDragEnter, false);
drag.addEventListener('dragover', handleDragOver, false);
drag.addEventListener('dragleave', handleDragLeave, false);
drag.addEventListener('dragend', handleDragEnd, false);
});
function handleDragStart(e){
console.log('handleDragStart');
}
function handleDragEnter(e){
console.log('handleDragEnter');
}
function handleDragOver(e){
console.log('handleDragOver');
}
function handleDragLeave(e){
console.log('handleDragLeave');
}
function handleDragEnd(e){
console.log('handleDragEnd');
}
</script>
回答by robertc
As others have mentioned it already works in Chrome. In Firefox you need to set dataTransferon dragstartand you need to do an e.preventDefault()to make elements valid drop targets. After that everything starts working:
正如其他人所提到的，它已经在 Chrome 中运行了。在 Firefox 中，您需要设置dataTransferondragstart并且需要执行 ane.preventDefault()以使元素成为有效的放置目标。之后一切开始工作：
var drags = document.querySelectorAll('.drag');
[].forEach.call(drags, function(drag) {
drag.addEventListener('dragstart', handleDragStart, false);
drag.addEventListener('dragenter', handleDragEnter, false);
drag.addEventListener('dragover', handleDragOver, false);
drag.addEventListener('dragleave', handleDragLeave, false);
drag.addEventListener('dragend', handleDragEnd, false);
drag.addEventListener('drop', handleDragEnd, false);
});
function handleDragStart(e) {
console.log('dragstart ' + e.target.innerText);
e.dataTransfer.setData('text/plain', 'This text may be dragged')
}
function handleDragEnter(e) {
console.log('dragenter ' + e.target.innerText);
e.preventDefault();
}
function handleDragOver(e) {
console.log('dragover ' + e.target.innerText);
e.preventDefault();
}
function handleDragLeave(e) {
console.log('dragleave ' + e.target.innerText);
}
function handleDragEnd(e) {
console.log('dragend ' + e.target.innerText);
e.preventDefault();
}<div draggable="true" class="drag">AAAAAA</div>
<div draggable="true" class="drag">BBBBBB</div>
<div draggable="true" class="drag">CCCCCC</div>
<div draggable="true" class="drag">DDDDDD</div>
<div draggable="true" class="drag">EEEEEE</div>Note: I also added a drophandler so that Firefox wouldn't try to load a URL when you drop something.
注意：我还添加了一个drop处理程序，以便 Firefox 在您放下某些东西时不会尝试加载 URL。
回答by masipcat
Using IE 10 works fine.
使用 IE 10 工作正常。
I recommend using jQuery UI, it's very, very simple and works in all browsers: http://jqueryui.com/demos/sortable/
我推荐使用 jQuery UI，它非常非常简单并且适用于所有浏览器：http: //jqueryui.com/demos/sortable/
