1

基本的に私が持っているのは一連のdoodadsであり、私がする必要があるのは、そのセット内の任意のアイテムを収容ボックスにドラッグできるようにすることです。ボックスに入ると、自由に移動したり操作したりできますが、削除することはできますが、ボックスから再び取り出すことはできません。

doodads は、ユーザーが必要に応じてボックス内に複数のアイテムを持つことができるため、複製するようにも設定されています。

したがって、2 つの部分は、doodad リストをセットアップし (既に完了しています)、それをドラッグ可能にして、ドロップ可能な div ボックスにドラッグできるようにすることです。2 番目の部分は、div ボックスに入ったら、再びドラッグ可能にする必要がありますが、クローン可能ではなく、ボックスにも含まれている必要があります。

これが私のJSコードです：

$(document).ready(function() {

function MakeDraggable(item) {
    item.draggable({
        revert : "invalid"
    });
}


$(".doodad").draggable({
    helper : 'clone',
    scroll : true
});

$(".dropped").draggable ({
    containment: ".box"
});
$(".box").droppable({
    accept : ".doodad",
    activeClass : "ui-state-default",
    hoverClass : "ui-state-hover",
    drop : function(event, ui) {

        var droppedItem = $(ui.draggable).clone();
        //droppedItem.class = ".dropped";
        droppedItem.draggable();
        //ui.draggable.draggable('option', 'revert', false);
        //droppedItem.draggable();
        $(this).append(droppedItem);
    }
});

});

私は多くのことを試しました。そのクラスのドラッグ可能な属性を引き継ぐことができるように、要素の ID を別のものに変更しようとしました。ドロップ関数内でプログラミングも試みましたが、問題が発生しています。

操作するためにドロップしたばかりのドラッグ可能な要素を参照する方法がわかりません。$(ui.draggable)、またはと言われたのですが、それ$(ui.draggable).clone()を参考に希望のオプションでドラッグ可能を呼び出してみるとうまくいきません。私が得た最高のものは、ドロップ後にドラッグ可能だったことですが、それ自体が複製され続け、ボックス内に含まれていませんでした.

どんな助けでも大歓迎です、そして私はこのすべてのものに不慣れです。JQuery API を確認しましたが、この点に関してはあまり役に立ちませんでした。

編集：

私のHtmlは：

<body>
    <img src="doodads/i1.gif" class="doodad">
    <img src="doodads/i2.gif" class="doodad">
    <img src="doodads/i3.gif" class="doodad">
    <img src="doodads/i4.gif" class="doodad">
    <div class="box" />
</body>

CSS は次のとおりです。

.box {
    width:500px;
    height:500px;
    background: orange;
}
4

1 に答える 1

4

たとえば、ドロップされた要素にクラスを設定し、ドロップされたcopied要素がすでにそのクラスを持っているかどうかを確認し、そうであれば複製を停止できます。

ボックス内の動きを制限するにはcontainment、ドラッグ可能なオプションを使用できます。

指定された要素または領域の境界内へのドラッグを制限します。

コード：

$(document).ready(function () {

    $(".doodad").draggable({
        helper: 'clone',
        scroll: true
    });

    $(".dropped").draggable({
        containment: ".box"
    });
    $(".box").droppable({
        accept: ".doodad",
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function (event, ui) {
            if ($(ui.draggable).hasClass('copied')) return
            var droppedItem = $(ui.draggable).clone().addClass('copied');
            droppedItem.draggable({
                containment: ".box"
            });
            $(this).append(droppedItem);
        }
    });
});

デモ: http://jsfiddle.net/IrvinDominin/ufHMm/

編集

ドロップされた要素の位置を取得するには、次を使用して計算して使用する必要がありました。

$(ui.helper).position().top - $(this).position().top
$(ui.helper).position().left - $(this).position().left

そのコンテナに沿ってヘルパーの位置を取得します。

最終的なコード:

$(document).ready(function () {

    $(".doodad").draggable({
        helper: 'clone',
        scroll: true
    });

    $(".dropped").draggable({
        containment: ".box"
    });
    $(".box").droppable({
        accept: ".doodad",
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function (e, ui) {
            if ($(ui.draggable).hasClass('copied')) return
            var droppedItem = $(ui.draggable).clone().addClass('copied').css({
                position: "relative",
                top: $(ui.helper).position().top - $(this).position().top,
                left: $(ui.helper).position().left - $(this).position().left
            }).draggable({
                containment: ".box"
            });
            $(this).append(droppedItem);

        }
    });
});

デモ: http://jsfiddle.net/IrvinDominin/ufHMm/3/

于 2013-09-07T15:40:53.690 に答える