HTML 5拖动事件 [英] HTML 5 drag events

问题描述

我正在尝试使用JS和HTML构建可重新排序的列表。 （尝试不使用jQuery ui）我似乎无法弄清楚为什么只有dragstart和dragend事件在拖动列表项时触发。任何人都知道为什么其他事件没有解雇？

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?

<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>

推荐答案

正如其他人所说，它已经在Chrome中运行。在Firefox中，你需要在 dragstart 上设置 dataTransfer ，你需要做一个 e.preventDefault （）使元素成为有效的放置目标。之后一切开始工作：

As others have mentioned it already works in Chrome. In Firefox you need to set dataTransfer on dragstart and you need to do an e.preventDefault() to make elements valid drop targets. After that everything starts working:

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('handleDragStart');
    e.dataTransfer.setData('text/plain', 'This text may be dragged')
}

function handleDragEnter(e){
    console.log('handleDragEnter');
    e.preventDefault();
}

function handleDragOver(e){
    console.log('handleDragOver');
    e.preventDefault();
}

function handleDragLeave(e){
    console.log('handleDragLeave');
}

function handleDragEnd(e){
    console.log('handleDragEnd');
    e.preventDefault();
}

注意：我还添加了 drop 处理程序，以便Firefox在您丢弃内容时不会尝试加载URL。

Note: I also added a drop handler so that Firefox wouldn't try to load a URL when you drop something.

这篇关于HTML 5拖动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！