CODEWITHSUNDEEP
jquerydrag-and-dropjquery-ui-draggablejquery-ui-droppable
user147
user147

Reputation: 1310

jQuery drag and drop, duplicates clone on drop

Not sure what is wrong, but when I drop item in second list, I'm editing that clone, html code on drop, and content that I'm adding to item, is being duplicated.

For example, I'm dropping an image, but on drop I want to add text box and label, my code is adding text box and label, but twice.

Here is my code : 

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

Upvotes: 1

Views: 13268

Answers (1)

RoboKozo
RoboKozo

Reputation: 5062

Not sure why it's adding it twice but here is a quick solution to fixing your problem. (It could be related to the bug that Iswanto San posted in the comments to the question).

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

I updated your drop function to check and see if it already contains the div you're trying to add. If it does, then it won't place it a second time.

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

Upvotes: 3

Related Questions