ドラッグアンドドロップのcmsサイトエディタを作成しています。ユーザーがウィジェットとそのコンテナーを移動できるようにしたいのですが、.sortableを使用すると、ドラッグを開始したときにコンテナーがそれ自体にドロップしたいようで、それ自体のコピーが100万個作成されます。この問題は、connectWithクラスとitemsクラスの両方が同じ要素にあることに関係している可能性があると思いますが、ホルダーとウィジェットの両方として機能するため、この状況で問題が発生する必要があると思います。すべてのホルダーが移動/サイズ変更可能なウィジェットであるとは限りません。したがって、基本的にページは次のように作成されます。
<div class='widget_holder' class='twelve columns'> //unmoveable holder
<div class='widget' class='six columns'> // moveable widget
</div>
<div class='widget_holder widget' class='six columns'> //moveable widget/holder
</div>
</div>
<div class='widget_holder' class='twelve columns'> //unmoveable holder
<div class='widget' class='four columns'> // moveable widget
</div>
<div class='widget' class='four columns'> // moveable widget
</div>
<div class='widget' class='four columns'> // moveable widget
</div>
<div class='widget' class='four columns'> // moveable widget
</div>
</div>
<div class='widget_holder' class='six columns'> // unmoveable holder
<div class='widget' class='six columns'> // moveable widget
</div>
<div class='widget_holder widget' class='six columns'> // moveable widget/holder
</div>
</div>
このようなjQueryの場合：
$(".widget_holder").sortable({ // adding it to the holders since it's the widgets within
distance: 30, // hoped this would help with jumpyness (didn't rly)
revert: true,
items: ".widget", // moveable widget
containment: 'body', // keeps it on the page
opacity: .8,
handle: ".move_widget", // a handle that hovers over the widget div
dropOnEmpty: true, // lets an empty holder accept a widget
connectWith: ".widget_holder", // put widgets in holders
tolerance: "pointer", // keep widget by pointer to make it a lil easier
cursorAt: { top:0, left: 0 },
start: function(e, ui){ // I don't remember why I did this
$(".widget_holder", ui.item).hide();
$(".widget_holder" ).sortable("refresh").addClass("holder_hover");
},
update: function(e, ui){ // my function makes a multi-dimensional array
//例：holder [0] = widget1、widget2、widget6＆holder [1] = widget3、widget5、widget4
updateByHolder();
},
stop: function(e, ui){ //don't remember what this does
$(".widget_holder", ui.item).show();
$(".widget").removeClass("full_width");
$(".widget_holder" ).removeClass("holder_hover");
}
});
これが私のjsFiddleです（正しく動作させることができませんでした。小さなものを見逃した可能性があります） http://jsfiddle.net/VaZnc/1/ よろしくお願いします。あなたはいつも非常に敏感で親切でした！
補足：私はどこでも答えを探しましたが、私のように誰もこれを実装していないので、それはちょっと難しいです。ほとんどの人はULを持っています（私はアイデアが似ていることを知っていますが、いくつかのプラグインはULでのみ動作します）私はガイダンス/別のhttp://dbushell.com/2012/06/17/nestable-jquery-plugin/を試しましたアプローチしますが、それでも理解できませんでした。
このすべての背後にある考え方は、私の顧客がメインホルダー内のホルダーを使用して列を作成し、好きなようにウィジェットを追加できるようにする必要があるということです（ウィジェットは実際にはあらゆる種類のコンテンツです...テキスト/写真/製品リスト/ブログなど）。