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

Question

我正在做一个项目，如果有一个拖放可重新排序的列表会很酷。我使用 HTML 5 Drag and Drop 轻松完成了这项工作。我的问题是该列表可能很长，因此它实际上是分页或“滚动加载”或您想要调用的任何名称。这只是通过响应滚动事件并通过 AJAX 加载更多数据来工作。

所以列表具有“凹凸滚动”功能，我通过在视口的顶部和底部放置两个通常不可见的 div 来实现这一点。当他们收到一个拖动事件时，他们只是增加或减少视口的滚动顶部。很简单。在小提琴中，我给了它们一个背景，这样你就可以看到它们。如果您尝试在 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 回调、超时等就不会触发。这似乎会搞砸很多事情，包括从 dragover 等开始的动画。

有谁知道我怎样才能让它工作？我可以取消拖动事件并重新开始吗？如果我能以某种方式取消它以允许 ajax 回调触发，则调用 dragDrop() 将再次开始拖动。

您可以在小提琴中看到，由拖动事件触发的所有 AJAX 调用都不会调用它们的回调，直到拖动结束。这不会发生在 chrome 或 FF 上。

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

更新：在 IE10 上效果更好

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 中编写了类似的代码。

我的解决方案是检查拖动是否悬停在凸块上，在拖动事件本身内部，而不是在凸块上单独悬停事件。

您甚至可以检查在颠簸上向下或向上拖动的距离以调整滚动速度。

希望这会有所帮助。