Databases
StackOverflow2013
Postsdbo
POjQuery sortable obtain 2 elements being swapped
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery sortable obtain 2 elements being swapped
    primarykey
    data
    text
    <p>I cannot find out how to obtain destination element with jQuery UI sortable.</p> <pre><code> $("#pages").sortable({ opacity: 0.6, update: function(event, ui) { var first = ui.item; // First element to swap var second = ???? // Second element to swap swapOnServer(first, second); } }); </code></pre> <p>All the options I've tried point to the element being dragged, but not the one it is swapped with: <code>ui.item[0]</code>, <code>event.srcElement</code>, <code>event.toElement</code>.</p> <p>Additionally, <code>this</code> points to the LIST (OL) element.</p> <p>Saying <strong>second</strong> I mean following:</p> <p>Original order is:</p> <blockquote> <p>| 0 | <strong>1</strong> | 2 | <strong>3</strong> |</p> </blockquote> <p>We drag element 1 and drop it in position 3. Which will end up with:</p> <blockquote> <p>| 0 | <strong>3</strong> | 2 | <strong>1</strong> |</p> </blockquote> <p>So the first element is 1 and the second is 3 (WRONG! See below).</p> <p><strong>UPDATE: I have realised that I got it wrong.</strong> The new order in this case will be.</p> <blockquote> <p>| 0 | 2 | 3 | <strong>1</strong> |</p> </blockquote> <p><strong>As a result my question does not really makes sense. Thanks everybody for the help. I'll mark vote and mark an answer.</strong></p> <p>So the question is how to obtain the second element here?</p> <hr> <p>THE CURRENT WORKAROUND (as there is no term as <em>swapping</em> in sortable) is below. It uses temporary array with orders.</p> <pre><code> var prevPagesOrder = []; $("#pages").sortable({ start: function(event, ui) { prevPagesOrder = $(this).sortable('toArray'); }, update: function(event, ui) { var currentOrder = $(this).sortable('toArray'); var first = ui.item[0].id; var second = currentOrder[prevPagesOrder.indexOf(first)]; swapOnServer(first, second); } }); </code></pre> <p>Thanks,<br> Dmitriy.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDmytrii Nagirniak
    1. USDmytrii Nagirniak
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery sortable obtain 2 elements being swapped
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POjQuery sortable obtain 2 elements being swapped
      1. USKerry Jones
      1. VTFavorite
    3. VO
      singulars
      1. POjQuery sortable obtain 2 elements being swapped
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO@Dimitriy, there is no "second item" so it makes your question extremely unclear. If you are allowing a user to pick up and drop an item anywhere in the list, it is merely shifting the indexes to make room for it. Only if he moves it one place up or down, are only two items affected. But if he takes it from the top of the list, and drops it after the next three items, those first three items position are all affected by the move. No "switch" has occurred. PLease describe in more detail what you are needing to accomplish.
      singulars
      1. POjQuery sortable obtain 2 elements being swapped
      1. USDoug Neiner
    2. COHow is the `swapOnServer` method?
      singulars
      1. POjQuery sortable obtain 2 elements being swapped
      1. USSan Diago
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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