Internet Explorer 9拖动事件阻塞事件队列

Question

Internet Explorer 9拖动事件阻塞事件队列

javascripthtmlinternet-explorerdrag-and-drop

4

我正在处理一个项目，希望实现拖放可重新排序列表。使用HTML 5的拖放功能，我已经成功实现了此功能。但问题在于，列表可能会很长，因此需要进行虚拟分页或“滚动加载”等操作。这可以通过响应滚动事件并通过AJAX加载更多数据来实现。

因此，该列表具有“bump scroll”功能，我通过在视口顶部和底部设置两个通常不可见的div来实现此功能。当它们接收到dragover事件时，它们只是增加或减少视口的滚动高度。非常简单。在fiddle中，我给它们添加了背景色，以便您可以看到它们。如果您在FF或Chrome中尝试fiddle，则可以看到随着ajax调用完成，UI会更新。但IE上没有这种情况。

dojo.byId("bumpScrollDown").connect("dragover", function(bump) {
    wrapper.scrollTop -=  20;
    dojo.xhrGet({url: "/echo/json/"}).then(function() {
        // THIS WILL NEVER FIRE on IE 9 UNTIL THE DRAG
        // OPERATION IS COMPLETED
        dojo.byId("log").innerHTML += "callback... ";
    }); 
});

问题在于IE 9上的拖拽会阻塞事件循环，因此当拖动时，ajax回调、超时等都不会触发。这似乎会影响很多东西，包括在拖动时开始的动画等。

有人知道我该如何让它工作吗？我能取消拖放事件然后重新开始吗？如果我能以某种方式取消它以允许ajax回调触发，那么调用dragDrop()将再次启动拖放。

您可以在fiddle上看到，由拖动事件触发的所有AJAX调用都不会在拖动结束之前调用它们的回调函数。这在Chrome或FF上不会发生。

http://jsfiddle.net/stevendwood/5VWZk/4/

更新：它在IE10上运行得更好

- Woody

所以，您可以取消拖动事件，似乎是为了结束拖放操作，这将解除阻塞并开始触发事件。但如果有其他想法，我会很感激。 - Woody

1个回答

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

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

- Rembunator · Answer 1

我没有IE9进行测试，但是...

此外，我可能完全错了，你是否测试过它与该代码中的 stopEvent 位有关：

dojo.connect(wrapper, "dragover", function(ev) {
    if (!dojo.hasClass(ev.target, "noDroppy")) {
        dojo.addClass(ev.target, "dragover");
        //dojo.stopEvent(ev);
    }
});

否则：

我最近用jQuery编写了类似的代码。

我的解决方案是在拖动事件本身中检查拖动是否悬停在隆起物上，而不是在隆起物上单独使用悬停事件。

您甚至可以检查拖动向下或向上拉过凸起的距离，以调整滚动速度。

希望这有所帮助。