CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
c12
c12

Reputation: 9827

JQuery UI Sortable Disable Update function before receive

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>

Upvotes: 8

Views: 7222

Answers (3)

Code Slinger
Code Slinger

Reputation: 1130

Try this:

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

Upvotes: 4

Stefan
Stefan

Reputation: 4206

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
    }
}

Upvotes: 13

bkmn
bkmn

Reputation: 81

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/

Upvotes: 4

Related Questions