ドラッグ時にノードを複製
-
05-07-2019 - |
質問
iは、ドラッグする要素のコピーを作成できるようにします。標準のUIをドラッグ可能およびドロップ可能に使用しています。ヘルパークローンオプションについて知っています。しかし、それはコピーを作成しません。ドラッグされたアイテムは元の位置に戻ります。
解決
マーク、
この例を試してください:
$(document).ready(function(){
$(".objectDrag").draggable({helper:'clone'});
$("#garbageCollector").droppable({
accept: ".objectDrag",
drop: function(event,ui){
console.log("Item was Dropped");
$(this).append($(ui.draggable).clone());
}
});
});
Htmlは次のようになります
<div class="objectDrag"
style="width:10%; color:white;border:black 1px solid; background-color:#00A">Drag me</div>
<div id="garbageCollector" style="width:100%; height:400px; background-color:#333; color:white;"> Drop items on me</div>
他のヒント
コメントはできませんので(まだ)別の回答として残しておきます-私のような誰かがこの質問を見つけた場合に備えて:
コメントからの質問について
&quot;しかし、クローン/ドロップされた要素は、ドロップされたのと同じ位置にしたいです。どうすればいいか知っていますか?&quot;
別のSO質問で解決策を見つけましたが、答えは次の行を変更することです:
$(this).append($(ui.draggable).clone());
to
$(this).append($(ui.helper).clone());
(ui.draggableをui.helperに変更)
お役に立てば幸いです。
クローン/コピーを再ドラッグするには、 withDataAndEvents
引数を true に設定します:
$(this).append($(ui.draggable).clone(*true*));
所属していません StackOverflow