Question

不确定是什么问题，但是当我在第二个列表中删除项目时，我正在编辑该克隆，drop上的html代码以及我正在添加到项目中的内容正在被复制。

例如，我正在删除图像，但是在删除时我想添加文本框和标签，我的代码是添加文本框和标签，但是两次。

这是我的代码：

$("#left-pane li").draggable({
    containment: '#gbox',
    cursor: 'move',
    helper: 'clone',
    scroll: false,
    connectToSortable: '#right-pane',
    appendTo: '#right-pane',
    start: function () {},
    stop: function (event, ui) {}
}).mousedown(function () {});

$("#right-pane").sortable({
    sort: function () {},
    placeholder: 'ui-state-highlight',
    receive: function () {},
    update: function (event, ui) {}
});

$("#right-pane li").live('dblclick', function () {
    $(this).remove();
})

$("#right-pane").droppable({
    accept: "#left-pane li",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        $(ui.draggable).append("<div class='single-item'><input type='text' class='item-title' /><br /><textarea class='item-text'></textarea></div>");
    }
});

$("#left-pane").droppable({
    accept: "#right-pane li",
    drop: function (event, ui) {}
});

$("ul, li").disableSelection();

HTML：

<ul id="left-pane">
   <li><img src="example.png" /></li>
   <li><img src="example2.png" /></li>
   <li><img src="example3.png" /></li>
</ul>

<ul id="right-pane">
</ul>

Answer 1

不确定为什么要添加两次，但这是解决问题的快速解决方案。（这可能与Iswanto San在问题评论中发布的错误有关。）

http://jsfiddle.net/Robodude/Y7RmR/

我更新了drop函数以检查它是否已包含您要添加的div。如果确实如此，则不会再次放置它。

$("#right-pane").droppable({
    accept: "#left-pane li",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        if ($(ui.draggable).children('.single-item').length == 0)
        {
            $(ui.draggable).append("<div class='single-item'><input type='text' class='item-title' /><br /><textarea class='item-text'></textarea></div>");
        }
    }
});

jQuery拖放，在drop上复制克隆

1 个答案: