web-dev-qa-db-ja.com

ドラッグ時にノードを複製する

ドラッグしたい要素のコピーを作成できるようにしたい。標準のUIドラッグ可能およびドロップ可能を使用しています。ヘルパークローンオプションについて知っています。しかし、それはコピーを作成しません。ドラッグしたアイテムは元の位置に戻ります。

javascriptjqueryclonedraggable
21
mark

マーク、

この例を試してください：

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

私は（まだ）コメントすることができないので、これを別の答えとして残しておきます-私のような誰かがこの質問を見つけた場合に備えて：

コメントからの質問について

「しかし、クローン/ドロップされた要素を、ドロップされたのと同じ位置に配置したいのですが、どうすればよいかわかりますか？」

私は別のSO質問で解決策を見つけました、そして答えはこの行を変更することです：

   $(this).append($(ui.draggable).clone());

に

   $(this).append($(ui.helper).clone());

（ui.draggableをui.helperに変更します）

それが役に立てば幸い。

9
Solo

クローン/コピーを再ドラッグするには、withDataAndEvents引数をtrueに設定します。

$(this).append($(ui.draggable).clone(*true*));
2
parampadam