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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20401180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 18:25:25  来源:igfitidea点击:

jQueryUI draggable + sortable bug (Cannot read property 'options' of undefined)

javascriptjqueryjquery-uijquery-ui-sortablejquery-ui-draggable

提问by N.Schipper

My question seems to resemble this question:

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

dragging from a sortable list to a drag and drop plugin

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

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:

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

$(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

And this is the code where it goes wrong:

这是出错的代码:

$.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;The $(this).data()only contains: Object {id: "c17"}

var o = $(this).data("ui-draggable").options;$(this).data()只包含:对象{ID: “C17”}

Example code:

示例代码:

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

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

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

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

采纳答案by Rooster

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

根据文档Jquery UI Draggable Documentation,您需要将 helper 参数设置为“clone”,以便 connectWithSortable 功能完美运行。

Once I did that, it stopped throwing the error.

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

Updated JSBin

更新了 JSBin

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.

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

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

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

Cheers.

干杯。

回答by Andrew Mao

I also ran into this problem when building a highly dynamic app using Meteor. It turns out that if you remove the original dragging item (or didn't clone it), you would get this error. This recurred several times in different versions of jQuery, but is now finally fixed in v1.11.0:

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

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

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