Question

Jquery sortable seems really confusing when it comes to referring to the recently moved element … so let’s say I have this list :

<ul id="slides-large-list-scroll" style="height: 770px; " class="ui-sortable">

<li style="background-color: #ff7d7d" value="2" class="pages-anchor"><a class="goto" id="linkto2" href="#2"><img src="http://localhost/Negar/thumbnail/sina_lol_2.png" class="thumbnail" id="thumbnail-2"> </a> </li>

<li style="background-color: rgb(255, 125, 125); " value="1" class="pages-anchor"><a class="goto" id="linkto1" href="#1"><img src="http://localhost/Negar/thumbnail/sina_lol_1.png" class="thumbnail" id="thumbnail-1"> </a> </li>

<li style="background-color: #ff7d7d" value="3" class="pages-anchor"><a class="goto" id="linkto3" href="#3"><img src="http://localhost/Negar/thumbnail/sina_lol_3.png" class="thumbnail" id="thumbnail-3"> </a> </li>

<li style="background-color: #ff7d7d" value="4" class="pages-anchor"><a class="goto" id="linkto4" href="#4"><img src="http://localhost/Negar/thumbnail/sina_lol_4.png" class="thumbnail" id="thumbnail-4"> </a> </li>

</ul>

and I’m using this :

$('#slides-large-list ul')
.sortable({ 
          axis: 'y',
          update: function(event, ui) {
              Nx.movePage($(this).eq());
              }
        });

so pretty much I want to pass eq value of recently moved element to Nx.movePage() function, but I can’t, and the documentation is not sufficient to explain what event and ui refer to. please help ! 🙂

Answer 1

You’re looking for ui.item.

You’re correct that the documentation on the update event isn’t extensive, but when in doubt, console.log everything.

Try the following in your function:

console.log(ui); Click on that object when you see it popup in the console. Check out all of those helpful properties.

So basically Nx.movePage(ui.item); should work for you.