jQueryUI 可拖动 + 可排序错误（无法读取未定义的属性“选项”）

Question

我的问题似乎类似于这个问题：

dragging from a sortable list to a drag and drop plugin

但是由于没有给出答案，我想知道是否有人可以/能够和我一起解决这个问题。我遇到的问题是我创建了一个可拖动的 div 并将其附加到一个可排序的 div 中。当我指定任何这样的参数时：

$(el).sortable({ ... arguments ... }); 

当元素被丢弃时会导致错误，见下文，当它为空时，它奇怪地工作正常并且没有问题。该错误还会阻止可拖动元素触发任何功能。

Uncaught TypeError: Cannot read property 'options' of undefined 
jquery-ui-1.10.3.custom.js:2204

$.ui.plugin.add.stop                         jquery-ui-1.10.3.custom.js:2204
$.extend.plugin.call                         jquery-ui-1.10.3.custom.js:284
$.widget._trigger                            jquery-ui-1.10.3.custom.js:2017
(anonymous function)                         jquery-ui-1.10.3.custom.js:401
$.widget._mouseStop                          jquery-ui-1.10.3.custom.js:1702
(anonymous function)                         jquery-ui-1.10.3.custom.js:401
$.widget._mouseUp                            jquery-ui-1.10.3.custom.js:957
(anonymous function)                         jquery-ui-1.10.3.custom.js:401
$.widget._mouseUp                            jquery-ui-1.10.3.custom.js:1721
(anonymous function)                         jquery-ui-1.10.3.custom.js:401
$.widget._mouseDown._mouseUpDelegate         jquery-ui-1.10.3.custom.js:913
jQuery.event.dispatch                        jquery-1.10.2.js:5095
jQuery.event.add.elemData.handle             jquery-1.10.2.js:4766

这是出错的代码：

$.ui.plugin.add("draggable", "cursor", {
    start: function() {
        var t = $("body"), o = $(this).data("ui-draggable").options;
        if (t.css("cursor")) {
            o._cursor = t.css("cursor");
        }
        t.css("cursor", o.cursor);
    },
    stop: function() {
        var o = $(this).data("ui-draggable").options;
        if (o._cursor) {
            $("body").css("cursor", o._cursor);
        }
    }
});

var o = $(this).data("ui-draggable").options; $(this).data() 仅包含：对象 {id: "c17"}

示例代码：

$('.draggable').draggable({
  connectToSortable: '.sortable',
  drop: function(){
    console.log('Element dropped');
  }
});

$('.sortable').sortable({
  update: function(){
     console.log('sortable updated'); 
  }
});

JSBin 示例：http://jsbin.com/eHUKuCoL/9/edit?html,js,output 希望有人能够告诉我问题是什么以及问题的解决方法是什么。

Answer 1

根据文档Jquery UI Draggable Documentation，您需要将辅助参数设置为“克隆”，以便 connectWithSortable 功能正常工作。

一旦我这样做了，它就会停止抛出错误。

Updated JSBin

另外请注意，draggable 在其文档中没有“drop”方法，因此如果您要这样做，您可能必须包含 droppable 插件。

最后，如果你必须使用 clone 作为辅助方法，你可能需要添加一些 css 以使其运行更流畅。

干杯。

Answer 2

我在使用Meteor 构建高度动态的应用程序时也遇到了这个问题。事实证明，如果您删除原始拖动项目（或没有克隆它），您会收到此错误。这在不同版本的 jQuery 中多次出现，但现在终于在 v1.11.0 中修复：

http://bugs.jqueryui.com/ticket/6889