JQuery UI Sortable Disable Update function before receive

7.1k views Asked by At

I'm using jquery ui to process a list that you can sort within and then also sort between another list. I'm using the update for the sorting within and that works fine. When I sort between I just want to call the receive function and not the update. Currently, update gets called and then receive gets called. Is there any way to skip the update call when sorting between lists?

<script>
            $ = jQuery
            $(function() {
                $( "#sortable1).sortable({
                    connectWith: ".connectedSortable",
                    placeholder: "ui-state-highlight",
                    update: function(event, ui) {processSortWithin(ui.item.attr("id"), ui.item.index()); },
                    receive: function(event, ui){ 
                        processSortBetween(ui.item.attr("id"), ui.item.index(),ui.sender.attr("id"));
                    }
                }).disableSelection();
            });

        </script>
3

There are 3 answers

2
Stefan On BEST ANSWER

Answer from: http://forum.jquery.com/topic/sortables-update-callback-and-connectwith

update: function(e,ui) {
    if (this === ui.item.parent()[0]) {
        //your code here
    }
}
0
bkmn On

I had a similar problem today, and the only solution I found was to introduce a flag variable that is set during update event, and checked during stop event.

In your example, you use receive event which will be fired on the list that receives new element from some other list, so it should be set inside $(".connectedSortable").sortable() options.

Here is my way to distinguish whether to sort (within one list, processed in stop) or to move (between two lists, processed in receive):

$(function() {
    position_updated = false; //helper flag for sortable below

    $(".sortable").sortable({
        connectWith: ".sortable",
        update: function(event, ui) {
            position_updated = !ui.sender; //if no sender, set sortWithin flag to true
        },
        stop: function(event, ui) {
            if (position_updated) {
                processSortWithin(ui.item.attr("id"), ui.item.index());
                position_updated = false;
            }
        },
        receive: function(event, ui) {
            processSortBetween(ui.item.attr("id"), ui.item.index(),ui.sender.attr("id"));
        }
    }).disableSelection();
});

function processSortWithin(id, position) {
    alert("sort within");
}

function processSortBetween(id, position, sender_id) {
    alert("sort between");
}

Working example: http://jsfiddle.net/myLff/2/

0
Code Slinger On

Try this:

update: function(e,ui) {
   if (!ui.sender) {
       //your code here
   }
}