jQueryUI可拖动+可排序的bug(无法读取未定义的属性' 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()仅包含:对象{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/编辑吗?html，js，输出希望有人能够告诉我问题是什么以及问题的解决方法是什么.

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可拖动+可排序的bug(无法读取未定义的属性' options')的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！