1

次のコードを使用して、要素を複製してドロップ可能領域に追加する方法を知りたいです。

    $(function() {
    $(".draggable").draggable();
    $(".item").droppable({
        drop: function(event, ui) {
            var $this = $(this);
            $this.append(ui.draggable);    

            var width = $this.width();
            var height = $this.height();
            var cntrLeft = width / 2 - ui.draggable.width() / 2;
            var cntrTop = height / 2 - ui.draggable.height() / 2;

            ui.draggable.css({
                left: cntrLeft + "px",
                top: cntrTop + "px"
            });
        }
    });
});

どなたか詳しく説明していただけると嬉しいです.Fiddleで例を挙げてください.とても助かります.ありがとう.

迅速な対応に感謝します。はい、問題ありません。クローンをドラッグしても機能しません。ドロップしたクローンを最も近い場所に交換する必要があります。以下のサンプルでわかるように、ドラッグできません。一度ターゲットにドロップされたとき。

http://jsfiddle.net/kiran/brCX5/31/embedded/result/

ウェブサイトのリンクはhttp://www.vitsoe.com/en/re/shop/606/sketchtoolで、ここで私の言いたいことがわかりますが、このリンクでは添付しているだけですが、削除する必要があります。最も近いパスにスナップされ、同じ画像をドロップすると、既存の画像の下に添付され、重ならないようにする必要があります。

そしてもう一度、あなたの反応に感謝します。

返信ありがとうございます。まったく同じものが必要ですが、前に言ったように位置を交換すると、最初にターゲットにドラッグアンドドロップすると、最も近い座標にスナップしません。 divセクションの最後にギャップはありませんが、画像を追加しています。最後に場所がない場合は、上部または下部にギャップがあるかどうかを確認し、それ以外の場合は画像に追加する必要があります元に戻せますか、確認してください。

4

1 に答える 1

-1

これがあなたが望んでいたものだと思います： http://jsfiddle.net/maniator/brCX5/33/

$(function() {
    $(".draggable").draggable({
        helper: 'clone',
        snap: '.ui-droppable',
        snapMode: 'outer'
    });

    $(".droppable").droppable({
        accept: '.draggable',
        drop: function(event, ui) {
            var clone = $(ui.draggable).clone();
            $(this).append(clone);
            clone.removeClass('draggable')
            clone.draggable({
                snap: '.ui-droppable',
                snapMode: 'outer'
            });
        }
    });
});

魅力のように機能します:-)、ようこそ

于 2011-03-24T22:31:45.220 に答える