Question

我正在开发一个项目，在这个项目中，拖放可重新订购列表会很酷。使用HTML 5 Drag and Drop，我没有太多麻烦就可以使用它。我的问题是列表可能很长，因此它实际上是分页或“加载滚动”或任何你想要调用它。这只是通过响应滚动事件并通过AJAX加载更多数据来实现的。

所以这个列表有一个“凹凸滚动”功能，我通过在视口的顶部和底部有两个通常不可见的div来实现它。当他们收到dragover事件时，他们只是增加或减少视口的滚动顶部。很简单。在小提琴中，我给了他们一个背景，你可以看到它们。如果您尝试使用FF或Chrome中的小提琴，您可以看到，当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中编写了类似的代码。

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

你甚至可以检查拖拽向下或向上拖动的距离，以调整滚动速度。

希望这有帮助。

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

1 个答案: