jQueryUI draggable + sortable bug（无法读取undefined的属性'options'） [英] jQueryUI draggable + sortable bug (Cannot read property 'options' of undefined)

问题描述

我的问题似乎与此问题类似：

My question seems to resemble this question:

从可排序列表拖放到拖放插件

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

But since there is no answer given to that one i was wondering if anybody could / would be able to figure it out with me. The issue i am having is that i create a draggable div and append this into a div that is made sortable. When i specify any arguments like so:

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

当元素被删除时会导致错误，如果留空，它会很奇怪地工作正常并且没有的问题。该错误还会阻止可拖动元素触发任何函数。

It causes an error when element is dropped see below, when left empty it strangely works fine and has no issues. The error also prevents any functions to be triggered by the draggable element.

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（）仅包含：Object {id：c17}

var o = $(this).data("ui-draggable").options; The $(this).data() only contains: Object {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
希望有人能告诉我这是什么问题是，问题的解决方案是什么。

JSBin example: http://jsbin.com/eHUKuCoL/9/edit?html,js,output Hopefully somebody is able to tell me what the issue is and what the fix for the issue is.

推荐答案

根据文件， Jquery UI可拖动文档，您需要将helper参数设置为clone，以使connectWithSortable功能完美运行。

According to the documentation, Jquery UI Draggable Documentation, you need to set the helper parameter to "clone", for the connectWithSortable functionality to work flawlessly.

一旦我做了它停止抛出错误。

Once I did that, it stopped throwing the error.

更新了JSBin

另外一个注释，draggable在其文档中没有'drop'方法，所以你可能必须包含droppable插件，如果这就是你想要的。

Also a note, draggable doesn't have a 'drop' method in its documentation, so you'll probably have to include the droppable plugin if thats what youre going for.

最后，如果你必须使用clone作为帮助方法，你可能需要添加一些css才能让它运行得更顺畅。

Lastly, if you have to use clone as the helper method, you'll probably need to add some css to make it run smoother.

干杯。

这篇关于jQueryUI draggable + sortable bug（无法读取undefined的属性'options'）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！