jQuery拖放，拖放复制克隆

不确定是什么问题，但当我在第二个列表中删除该项时，我正在编辑该克隆、删除时的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();

$（“#左窗格li”）。可拖动({
安全壳：“#gbox”，
光标：“移动”，
助手：“克隆”，
卷轴：错，
connectToSortable:“#右窗格”，
附录：“#右窗格”，
开始：函数（）{}，
停止：函数（事件，ui）{}
}).mousedown（函数（）{}）；
$（“#右窗格”）。可排序({
排序：函数（）{}，
占位符：“ui状态突出显示”，
receive:function（）{}，
更新：函数（事件，ui）{}
});
$（“#右窗格li”）.live（'dblclick'，function（）{
$（this.remove（）；
})
$（“#右窗格”）。可拖放({
接受：“#左窗格li”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
$（ui.draggable）.append（
）；
}
});
$（“#左窗格”）。可拖放({
接受：“#右窗格li”，
drop:函数（事件，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>

不确定为什么要添加两次，但这里有一个解决问题的快速方法。（这可能与Iswanto San在对问题的评论中发布的bug有关）

我更新了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>");
        }
    }
});

$（“#右窗格”）。可拖放({
接受：“#左窗格li”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
if（$（ui.draggable）.children（'.single item'）。长度==0）
{
$（ui.draggable）.append（
）；
}
}
});

您能提供您的html吗？或者提供一个JSFIDLE链接也不错@Robodude它被添加了，我的意思是，html。你看到了吗？从jQuery1.7开始，

.live（）

方法就被弃用了。使用

.on（）

附加事件处理程序。较旧版本的jQuery用户应该优先使用

.delegate（）

，而不是

.live（）

。嘿，谢谢你，这很管用，我只需要检查一下长度。谢谢。在右侧窗格中，如何将放置的图像放置在放置的位置上，而不是一个图像接一个图像？