0

アイテムをコンテナーにドロップできるウィジェットがあります。ユーザーが同じ要素をコンテナにドラッグアンドドロップできるように、元の要素をドロップ可能なコンテナの外に置いておきたい（コンテナに同じ要素を複数持つことができるようにする）。クローン ヘルパーを使用していますが、元の要素を削除しない方法がわかりません。どんな助けでも大歓迎です。ありがとう！以下は私のコードです：

$(function() {
var $gallery = $( "#gallery" ),
    $trash = $( "#trash" );


$( "li", $gallery ).draggable({
    cancel: "a.ui-icon", 
    revert: "invalid", 
    containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present
    helper: "clone",
    cursor: "move"
});


$trash.droppable({
    accept: "#gallery > li",
    activeClass: "ui-state-highlight",
    drop: function( event, ui ) {
        deleteImage( ui.draggable );
    }
});

$gallery.droppable({
    accept: "#trash li",
    activeClass: "custom-state-active",
    drop: function( event, ui ) {
        recycleImage( ui.draggable );
    }
});

HTML:

<div class="demo ui-widget ui-helper-clearfix">

<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
    <li class="ui-widget-content ui-corner-tr" a href="link/to/trash/script/when/we/have/js/off">
        <h5 class="fpheader">Red</h5>   

    </li>
    <li class="ui-widget-content ui-corner-tr">
        <h5 class="fpheader">Orange</h5>

    </li>
    <li class="ui-widget-content ui-corner-tr">
        <h5 class="fpheader"Yellow</h5>
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <h5 class="fpheader">Green</h5>
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <h5 class="fpheaderr">Blue</h5>
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <h5 class="fpheader">Purple</h5>
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <h5 class="fpheader">White</h5>

    </li>
</ul>

</div>
4

1 に答える 1

1

複製ヘルパーは、ドラッグ中に表示する目的で、ドラッグしている要素を複製します。それ以外の場合、ドロップ時に要素を複製しません。ドロップ ハンドラー内で行う必要があるのは、要素を自分で複製し ( を使用できますui.draggable)、それをドロップ可能なコンテナーにアタッチすることです。

次に例を示します。

$trash.droppable({
    accept: "#gallery > li",
    activeClass: "ui-state-highlight",
    drop: function( event, ui ) {
        var element = ui.draggable.clone().appendTo($(this));
        element.draggable({
            cancel: "a.ui-icon", 
            revert: "invalid", 
            containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present
            helper: "clone",
            cursor: "move"
        });
    }
});
于 2012-10-08T20:44:18.203 に答える