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 回答