4

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

所以列表有一个“凹凸滚动”功能，我通过在视口的顶部和底部有两个通常不可见的 div 来实现这一点。当他们收到一个拖动事件时，他们只是增加或减少视口的滚动顶部。很简单。在小提琴中，我给了它们一个背景，这样你就可以看到它们。如果您在 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 上效果更好

4

1 回答 1

0

我没有IE9可以测试但是...

另外，我在这里可能完全错了，但是，您是否测试过它是否与此代码中的stopEvent位有关：

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

否则：

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

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

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

希望这可以帮助。

于 2013-06-10T09:40:50.017 回答