为什么使用 Crossrider 和 JQueryUI 在 IE 中可以拖动一次 DIV？ & 没有触发 Dragstop 事件？答案

【问题标题】：Why the DIV is draggable once in IE using Crossrider & JQueryUI ? & no dragstop event fired?为什么使用 Crossrider 和 JQueryUI 在 IE 中可以拖动一次 DIV？ & 没有触发 Dragstop 事件？
【发布时间】：2013-03-14 14:59:55
【问题描述】：

我正在使用 Crossrider，我想向页面的 DOM 添加一个可拖动的 div。
以下代码在 Chrome 和 Firefox 上运行良好，并且为 Chrome 和 Firefox 触发了 dragstop 处理函数，没有任何问题。
但是对于 IE，div 是可以拖动一次的！即div一旦放下就不能再拖了，更奇怪的是在IE中根本没有触发dragstop事件处理程序！？

如何在 IE 中解决这个问题！？

代码如下：

extension.js 文件

appAPI.ready(function(jQuery) {              
    appAPI.resources.jQueryUI('1.10.1'); 
    appAPI.resources.includeCSS('styles.css');
    var $div = jQuery('<div class="square" ></div>').appendTo('body');
    $div.draggable( {containment: "window", scroll: false} );
    $div.bind('dragstop', function() {
        console.log("drag stopped ..."); 
    }); 
});

styles.css 文件

.square {
    display:block; 
    z-index: 1000001; 
    background-color: #000000; 
    height: 100px; 
    width: 100px;
    top: 0px;
    left: 0px;
    position: fixed;
}

请注意，我在没有 crossrider 的情况下尝试了代码，并且在 IE 上运行它，它运行良好。
您可以使用此链接进行尝试：http://jsfiddle.net/GHaMV/

【问题讨论】：

顺便说一句：你不能在 IE8 中测试小提琴——因为 jsfiddle 在那些浏览器中不起作用。

标签： jquery-ui internet-explorer jquery-ui-draggable crossrider

【解决方案1】：

我在使用 Crossrider 时遇到了同样的问题，并通过声明一个返回可拖动元素的处理函数来解决该问题，因此您的代码应如下所示：

$div.draggable({
      containment: window,
      helper: function() {
          return $div;
      }
});

希望对你有帮助...

【讨论】：

【解决方案2】：

没有dragstop 事件，只有stop 钩子（see the docs）：

使用它like this:

$div.draggable({
    containment: "window",
    scroll: false,
    stop: function() {
        console.log("drag stopped ..."); 
    }
});

【讨论】：

感谢西蒙的回复。但是“停止”也存在同样的问题。问题不在 jQueryUI 和 IE 中。正如您在我的示例中看到的那样，使用“dragstop”的代码在 IE 页面中运行良好，但在 IE 中的 crossrider 扩展中运行时却不行。在 IE 上运行 crossrider 扩展时，“停止”也存在同样的问题。
好吧，你提供的代码在 FF 中对我不起作用（只是 Dragstop 部分），所以我认为它存在一般性问题。