1

不知道出了什么问题，但是当我将项目放在第二个列表中时，我正在编辑该克隆，拖放时的 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>
4

1 回答 1

3

不知道为什么要添加两次，但这是解决问题的快速解决方案。（这可能与 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>");
        }
    }
});
于 2013-01-19T01:40:53.653 回答