私の質問はこの質問に似ているようです:
並べ替え可能なリストからドラッグアンドドロッププラグインへのドラッグ
しかし、それに答えがないので、誰かが私と一緒にそれを理解できるかどうか疑問に思っていました。私が抱えている問題は、ドラッグ可能な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うまくいけば、誰かが問題とは何か、問題の修正は何かを教えてくれるでしょう。
ドキュメント、Jquery UI Draggable Documentationによると、connectWithSortable機能を問題なく機能させるには、ヘルパーパラメーターを「クローン」に設定する必要があります。
それを行うと、エラーのスローが停止しました。
また、ドラッグ可能にはドキュメントに「ドロップ」メソッドがないため、それが目的の場合は、ドロップ可能プラグインを含める必要があります。
最後に、ヘルパーメソッドとしてcloneを使用する必要がある場合は、スムーズに実行するためにcssを追加する必要があります。
乾杯。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加