Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The error is a result of having a div.sortable nested in another div.sortable, so it it fires the sorting twice when you drop in a new element. The workaround I came up with just counts the number of elements added in a particular drop and adds a class called 'deleteMe' to the duplicates.</p> <p>Then you just call $(".deleteMe").remove() at the end of a sort to remove the extras.</p> <p>Not ideal, but seems to work for me. <a href="http://jsfiddle.net/JUnA7/72/" rel="nofollow">http://jsfiddle.net/JUnA7/72/</a></p> <pre><code>$(function() { var dropCount=0; $(".sortable").sortable({ connectWith: ".sortable", cursor: 'pointer', receive: function(event, ui) { dropCount=dropCount+1; if(dropCount&gt;1) $(ui.item).addClass("deleteMe"); console.log(dropCount); }, start: function(event, ui) { dropCount=0; var placeholders=0; $(".ui-sortable-placeholder").each(function(){ placeholders=placeholders+1; if(placeholders&gt;1) $(this).height(0); }); }, stop: function(event, ui) { $(".deleteMe").remove(); dropCount=0; } }); $(".draggable").draggable({ handle: ".icon-move", connectToSortable: ".sortable", appendTo: "body", helper: 'clone', distance: 30 }); });​ </code></pre> <p><strong>UPDATED</strong></p> <p>Also, I noticed that the sorting placeholders a duplicated too..so I removed the duplicates by setting their height to 0px.</p> <pre><code> start: function(event, ui) { dropCount=0; var placeholders=0; $(".ui-sortable-placeholder").each(function(){ placeholders=placeholders+1; if(placeholders&gt;1) $(this).height(0); }); } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload