Question

I have two sortable lists linked together.

I have an event listener on the first list calling function “A” on “sortupdate” to do some functionality when I am sorting items within the list or when receiving items from the other list.

I also have an event listener on the second list calling function “B” on “sortreceive” to do some functionality when it has received an item from another list.

My problem is that whenever I move something from list 1 to list 2, function “A” is called as well, causing errors in my code. I would like to add an ‘if’ clause to the beginning of function “A” saying to run this code only if the first list is the target, but I can’t for the life of me figure out how to reference the target.

Or maybe there is a better way to check if an item was dragged out of this list?

/* adding current code */

$("#divMainMenu").bind("sortupdate", function(event, ui) 
    { dropRootCategory(event,ui);})//when the main menu receives a menu item
$("ul.divSubMenu ").bind("sortreceive", function(event, ui) 
    { dropSubMenu(event, ui);})//when the main submenu receives a menu item
function dropRootCategory(event, ui) 
{/*item dropped on root category*/
//do some different stuff
}
function dropSubCategory(event, ui) 
{//item dropped on a sub submenu
//do some stuff
}

I have tried checking the target:

if (event.target.id == 'divMainMenu') { //

which doesn’t work because the target id stays ‘divMainMenu’ no matter where I am dropping to.

Next I tried checking for sender:

if (ui.sender == 'null'){// 

However, this only populated with any information after it passed through the sortupdate phase and went to the sortreceive, so again it triggered the code to run.

/*******Updated with answer
Per Keith’s idea below, I answered this with the following code:
On initiation of the menu, I added a variable holding the length of the original length of the main menu

var numMenuItems = $('#divMainMenu').children().length;

Then for my if statement:

if ($('#divMainMenu').children().length >= numMenuItems){
//do some stuff
}

Thanks again Keith! I was going nuts on this one 🙂

Answer 1

Ok, I really did find another answer to this.
By adding a flag to the start event when defining the sortable, AS WELL AS a function call to the stop event :

$('ul.divSortable').sortable({
    items: "li:not(.liEdit)", //cancel: ".liEdit",
    connectWith: '.divSortable',
    start: function(event, ui) { setOriginalSub(ui); },        
    stop: function(event, ui) { isBeingSorted = false; sortSorter(event, ui); }
});

and a function which grabs the id before sorting takes place:

function setOriginalSub(ui) 
{
    originalSub = $(ui.item[0]).parent().attr('id');
}

I can now compare the original ID with the current ID.

function sortSorter(event, ui){
    var parentID = $(ui.item[0]).parent().attr('id');
}

Brilliant, and I wouldn’t have thought of it without Keith’s help!