HTML5 拖放功能，拖动开始后不会触发鼠标滚轮事件。

Question

HTML5 拖放功能，拖动开始后不会触发鼠标滚轮事件。

javascripthtmlangulartypescriptdrag-and-drop

6

我有一个应用程序，在其中使用HTML5拖放进行类别排序，因此用户可以将类别移动到他想要的位置。

一切都很好，但有时类别列表非常庞大，如果用户需要向下滚动，则希望使用鼠标滚轮进行滚动，但问题是dragstart事件在此之后不会被触发。

PS. 是的，如果光标移到底部，浏览器会滚动，但在我的应用程序中，用户体验很重要，因为有时他们正在对大约50个类别进行排序，这需要很长时间。

以下是示例代码：如果您开始拖动div并使用鼠标滚轮，则不会打印任何事件到控制台，这意味着事件未被触发。

<!DOCTYPE html>
<html>

  <head>
  <script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

document.addEventListener("wheel", function(e){
        console.log(e);
    }, false);

</script>
</head>
<body>


<div id="drag1"  draggable="true"
ondragstart="drag(event)" width="336" height="69"  style="    border: 1px solid #aaaaaa;">Dragg me</div>

</body>
</html>

- Vova Bilyachat

你能创建一个 jsfiddle http://jsfiddle.net 来演示吗？ - guest271314

@guest271314 在 https://jsfiddle.net/uo00zL0L/ 中打开控制台，然后开始拖动 div，按住鼠标并尝试使用滚轮，您会发现没有事件被打印出来。 - Vova Bilyachat

1

“dragstart”和“wheel”事件有什么关联？ - guest271314

1

让我们在聊天中继续这个讨论。 (http://chat.stackoverflow.com/rooms/132452/discussion-between-guest271314-and-volodymyr-bilyachat) - guest271314

1

实际上，我在所有地方都看到了这种行为。很少有用户界面允许在执行拖放操作时滚动。这太可惜了。为什么你会忽略滚动，尤其是在拖动东西的时候？？？我不明白。请有人给我解释一下。哪个天才甚至有这个绝妙的想法？！ - Johannes

显示剩余6条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vova Bilyachat · Answer 1

由于我正在使用Angular，它是https://github.com/bevacqua/dragula的端口，因此最终使用了ng2-dragula。