Jqueryui sortable receive event called multiple times

Question

So i have a nested jqueryui sortable and a draggable item that i can drag a copy into any level sortable.

See jsfiddle here http://jsfiddle.net/rmossuk/JUnA7/4/

• Product
• • Item1
• • Item2
• • Item3
• • • Item5
• • • Item6
• • Item4

NewItem

The problem is when i drag the NewItem into the nested sortable ( Item3 ) the receive event gets called 3 times. Once for the product sortable and for some reason twice for the Item3 sortable !!??

I need it so that just the Item3 sortable receive event gets called and not the other 2.

Does anyone know how to do this please??

thanks a lot

Answer 1

Hey I changed you code a bit if you can compromise on using ol and li Give this code a try if it works for u

HTML

 <div class="container">Product1
    <ol class="sortable">
        <li>Item1</li>
        <li>Item2</li>
        <li name="to item3">Item3
           <ol>
                <li class="inner">Item5</li>   
                <li class="inner">Item6</li>  
           </ol>              
        </li>
        <li>Item4</li>
        <li name="new item moved">New Item</li>
    </ol>
 </div>

JQUERY

 $(document).ready(function(){
    $('ol.sortable').nestedSortable(
        {
            disableNesting: 'no-nest',
            forcePlaceholderSize: true,
            handle: 'div',
            items: 'li',
            opacity: .6,
            placeholder: 'placeholder',
            revert: 250,
            tabSize: 25,
            tolerance: 'pointer',
            toleranceElement: '> div',
            connectWith: '.sortable',
            stop: function(event, ui){
                var element = $(ui.item).attr("name");
                var parent = $(ui.item).parent().attr("name");
                alert(element);
                alert(parent);
           }
        });
   });

CSS

li {
   margin-left: 10px;
   margin-top: 10px;
}
.inner{
   margin-left: 40px;
}

Don't forget to include nestedsortable.js and latest Jquery

Answer 2

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.

Then you just call $(".deleteMe").remove() at the end of a sort to remove the extras.

Not ideal, but seems to work for me. http://jsfiddle.net/JUnA7/72/

$(function() {
    var dropCount=0;
    $(".sortable").sortable({
        connectWith: ".sortable",
        cursor: 'pointer',
        receive: function(event, ui) {
            dropCount=dropCount+1;
            if(dropCount>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>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
    });
});​

UPDATED

Also, I noticed that the sorting placeholders a duplicated too..so I removed the duplicates by setting their height to 0px.

    start: function(event, ui) {
        dropCount=0;   
        var placeholders=0;
        $(".ui-sortable-placeholder").each(function(){
            placeholders=placeholders+1;                
            if(placeholders>1)
                $(this).height(0);
        });
    }

Answer 3

I think you need to prevent event propagation somewhere like:

  event.stopPropagation();

I tried it quickly in a few places using jsfiddle but it didn't work right away so you might have to write some more code.