2

ここで見られるような JavaScript ドラッグ アンド ドロップ アプリケーションを開発したいと考えています。このアプリケーションでは、オブジェクトを選択して別の領域にドラッグできます。しかし、私はひねりを加えてこれをやりたいです。オブジェクトを本棚からバスケットに移動する代わりに、同じオブジェクトを複数回ドラッグできるようにしたいのですが、オブジェクトの 1 つのインスタンスを本棚にドラッグしても、オブジェクトは本棚に残っています。

これは、同じオブジェクトの複数のインスタンスを購入するようなものです。オブジェクトを本棚からバスケットにドラッグするたびに、オブジェクトの別のインスタンスをバスケットに追加します。

この効果をどのように達成できるかについてのアイデアはありますか?

4

1 に答える 1

5

通常のドラッグアンドドロップと同じことを行いますが、ドラッグされたオブジェクトを削除する代わりに、クローンを作成します。

ドラッグアンドドロップの実装はちょっとトリッキーです。jQueryのようなライブラリを使用すると、時間と労力を大幅に節約できます。jQuery UIのドラッグ可能helper: cloneオブジェクトには、ドラッグされたオブジェクトをそのままにして、代わりにクローンを作成するオプションがあります。次に、 jQuery UI Droppableを使用してドロップ領域を定義するときに、バスケットアイテムを表す新しい要素を作成し、ドラッグしたアイテムをそのままにしておくなど、ドロップした要素で好きなことを行うことができます。したがって、jQueryの使用がオプションである場合、それを行うのはまったく難しいことではありません。

更新：ここにクイックデモがあります

HTML

<div id="list">
    <div class="productItem">product 1</div>
    <div class="productItem">product 2</div>
    <div class="productItem">product 3</div>
</div>

<div id="basket">
</div>​

JS

$(".productItem").draggable({
    helper: 'clone',
    handle: "productItem"
});

$("#basket").droppable({
    accept: ".productItem",
    drop: function(event, ui){
        $("<div></div>")
            .html(ui.draggable.text())
            .appendTo($(this));
    }
});

</ p>

于 2012-09-17T15:32:33.013 に答える