1

何が問題なのかわかりませんが、アイテムを 2 番目のリストにドロップすると、そのクローンを編集し、ドロップ時に HTML コードを編集し、アイテムに追加するコンテンツが複製されます。

たとえば、画像をドロップしていますが、ドロップ時にテキスト ボックスとラベルを追加したいのですが、私のコードはテキスト ボックスとラベルを 2 回追加しています。

これが私のコードです:

$("#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

なぜ2回追加されているのかわかりませんが、問題を解決するための簡単な解決策があります. (Iswanto San が質問へのコメントに投稿したバグに関連している可能性があります)。

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

ドロップ機能を更新して、追加しようとしている div が既に含まれているかどうかを確認しました。その場合、2 回目は配置されません。

$("#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 に答える