javascript - Internet Explorer 9 拖动事件 block 事件队列

Question

我正在做一个项目，如果有一个拖放可重新排序的列表会很酷。我使用 HTML 5 拖放功能毫不费力地完成了这项工作。我的问题是列表可能很长，所以它实际上是分页的或“滚动加载”或任何你想调用它的。这只是通过响应滚动事件并通过 AJAX 加载更多数据来工作。

因此该列表具有“凹凸滚动”功能，我通过在视口(viewport)的顶部和底部设置两个通常不可见的 div 来实现此功能。当他们收到 dragover 事件时，他们只是增加或减少视口(viewport)的滚动顶部。很简单。在 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 回调、超时等就不会触发。这似乎会搞砸很多事情，包括从 dragover 开始的动画等。

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

您可以在 fiddle 上看到，在拖动结束之前，拖动事件触发的所有 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 中编写了类似的代码。

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

您甚至可以检查拖动在颠簸上向下或向上拉多远，以调整滚动速度。

希望这对您有所帮助。