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

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

我的问题似乎类似于以下问题：

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

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

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

将元素放下时会导致错误，请参见下文；如果将其保留为空，它会正常工作并且没有问题。该错误还阻止了可拖动元素触发任何功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

这是出错的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$.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 "}

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12

$('.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
希望有人能够告诉我问题是什么以及问题的解决方法是什么。

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

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

更新的JSBin

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

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

干杯。