StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POMoving item to new sortable: How to reference list I am dropping element to?
text
Body
copied!<p>I have two sortable lists linked together. </p> <p>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.</p> <p>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. </p> <p>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. </p> <p>Or maybe there is a better way to check if an item was dragged out of this list?</p> <p>/* adding current code */</p> <pre><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 } </code></pre> <p>I have tried checking the target:</p> <pre><code>if (event.target.id == 'divMainMenu') { // </code></pre> <p>which doesn't work because the target id stays 'divMainMenu' no matter where I am dropping to.</p> <p>Next I tried checking for sender:</p> <pre><code>if (ui.sender == 'null'){// </code></pre> <p>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.</p> <p>/<strong><em>*</em>**<em>*</em>**</strong>*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</p> <pre><code>var numMenuItems = $('#divMainMenu').children().length; </code></pre> <p>Then for my if statement:</p> <pre><code>if ($('#divMainMenu').children().length >= numMenuItems){ //do some stuff } </code></pre> <p>Thanks again Keith! I was going nuts on this one :)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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