Html5拖放，dragstart后不触发Mousewhell事件答案

【问题标题】：Html5 Drag and Drop, Mousewhell event is not fired after dragstartHtml5拖放，dragstart后不触发Mousewhell事件
【发布时间】：2017-01-05 23:15:13
【问题描述】：

我有一个应用程序，我在其中进行 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>

【问题讨论】：

可以创建一个jsfiddlejsfiddle.net来演示吗？
@guest271314 jsfiddle.net/uo00zL0L 打开控制台，然后开始拖动div，按住鼠标并尝试使用滚轮，您将看到没有打印出任何事件
dragstart 和 wheel 事件有何关联？
让我们continue this discussion in chat.
实际上，我在所有地方都看到了这种行为。很少有用户界面允许在执行拖放操作时滚动。这是一个耻辱。为什么您会忽略滚动，尤其是在拖动某些东西时？？？？我不明白。请有人向我解释。哪个天才有这个绝妙的主意？！

标签： javascript html angular typescript drag-and-drop

【解决方案1】：

最终使用了 ng2-dragula，因为我使用的是 angular 端口 https://github.com/bevacqua/dragula

【讨论】：