我正在处理一个项目,希望实现拖放可重新排序列表。使用HTML 5的拖放功能,我已经成功实现了此功能。但问题在于,列表可能会很长,因此需要进行虚拟分页或“滚动加载”等操作。这可以通过响应滚动事件并通过AJAX加载更多数据来实现。
因此,该列表具有“bump scroll”功能,我通过在视口顶部和底部设置两个通常不可见的div来实现此功能。当它们接收到dragover事件时,它们只是增加或减少视口的滚动高度。非常简单。在fiddle中,我给它们添加了背景色,以便您可以看到它们。如果您在FF或Chrome中尝试fiddle,则可以看到随着ajax调用完成,UI会更新。但IE上没有这种情况。
问题在于IE 9上的拖拽会阻塞事件循环,因此当拖动时,ajax回调、超时等都不会触发。这似乎会影响很多东西,包括在拖动时开始的动画等。
有人知道我该如何让它工作吗?我能取消拖放事件然后重新开始吗?如果我能以某种方式取消它以允许ajax回调触发,那么调用dragDrop()将再次启动拖放。
您可以在fiddle上看到,由拖动事件触发的所有AJAX调用都不会在拖动结束之前调用它们的回调函数。这在Chrome或FF上不会发生。
因此,该列表具有“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上运行得更好