Sortable: Problem with swapping elements.

Created on 4 Apr 2017  路  2Comments  路  Source: SortableJS/Sortable

I'm trying to implement swap of 2 divs, but they're swapping in a weird way.

I've been digging on the issues section and the problem that I'm having is kinda similar to #869.

Basically what I'm trying to do is.

| Table |Example |
|:---:|:---:|
| 1 | 2 |
| 3 | 4 |

If I were to drag 2 to 4 or vice versa, I'm expecting it would return:

| Table |Example |
|:---:|:---:|
| 1 | 4 |
| 3 | 2 |

But the current implementation (dragging 2 to 4)

Returns

| Table |Example |
|:---:|:---:|
| 1 | 3 |
| 4 | 2 |

and when dragging 4 to 2

Returns

| Table |Example |
|:---:|:---:|
| 1 | 4 |
| 2 | 3 |

I've tried doing this but it doesn't do what I wanted.

I'd appreciate any help/ guide.

Thanks

Most helpful comment

I have the same problem.

All 2 comments

I have the same problem.

this issue was supposedly resolve with issue #469, but using the latest version of Sortable, the "swap" function he prototyped as a solution does not actually swap items. instead, it implements the same shifting functionality.

I think a new feature should be added to decide how items are moved. currently, it appears that it always does a shift. for example, in a list of 5 elements, if you move the 4th element to the 1st element, all the elements between are shifted up.

the new feature should be to choose between a "shift" item update and a "swap" item update, where in a swap, only the old item and new item indexes are changed. items between new and old would remain the same.

shift example:
1 2 3 4 5 ==> move 4 to 1 ==> 4 1 2 3 5

swap example:
1 2 3 4 5 ==> move 4 to 1 ==> 4 2 3 1 5

I have not dug into the code for this project all that much, I'll give it a go to see what would need to be changed to implement this. as far as I can tell, there is no config option available to do this. I would love to be wrong, though.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tom-sherman picture tom-sherman  路  3Comments

rakeshrockb picture rakeshrockb  路  3Comments

artaommahe picture artaommahe  路  4Comments

graemegeorge picture graemegeorge  路  4Comments

chrishaigy picture chrishaigy  路  3Comments