Html5拖放，在dragstart后不激发Mousewhell事件
我有一个应用程序，我正在做html5拖放分类，所以用户可以选择分类并移动到他想要的地方。
一切都很好，但有时类别列表很大，如果用户需要将其向下移动，他们希望使用鼠标滚轮滚动，但问题是拖动启动后不会触发此事件。
注：是的，如果光标移到底部，浏览器将滚动，但在我的应用程序中，用户体验很重要，因为有时他们会对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>
共有1个答案
最终使用ng2-dragula，因为我使用的是angular，这是 https://github.com/bevacqua/dragula
-
本文向大家介绍对于HTML5拖放事件，dragLeave事件在放置之前触发，包括了对于HTML5拖放事件，dragLeave事件在放置之前触发的使用技巧和注意事项，需要的朋友参考一下 要解决拖放事件的这一问题，有时在拖动之前将dragLeave触发： 在下拉菜单中，您可以设置以下内容：
-
#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Tex
-
我想将事件附加到元素以处理文件拖放事件，但似乎此事件也附加到所有子元素。例如 ...如果我将文件拖到属于元素的任何元素上，控制台将输出。因此，如果我将此事件附加到或，则当悬停在页面上的任何元素上时，事件将触发。 对于＜code＞dragleave 为什么会这样？有没有办法把这个事件只附加到指定的元素上？如果没有，有没有办法将事件从所有子元素中分离出来？ 这里有一个摆弄的例子：http://jsfi
-
本文向大家介绍拖放元素后，JavaScript中哪个事件发生？，包括了拖放元素后，JavaScript中哪个事件发生？的使用技巧和注意事项，需要的朋友参考一下 该ondrop事件触发时，拖动的元素被丢弃的目标。您可以尝试运行以下代码以了解如何在JavaScript中实现ondrop事件- 示例
-
我正在使用本机拖放html5 api开发拖放界面。我们已经在其他部分使用了jQuery拖动，但是它在这个特定部分的表现很差，所以我们使用原始的JavaScript。 本质上，标记看起来像这样... 我为“dragstart”创建一个addEventListener并运行以下函数 它将我的类完美地应用于原始元素，但我似乎不能移动原始元素。浏览器创建克隆/幽灵图像...我看到你可以创建自己的图像显示，