Swap Feature

[gazugafan]

This is a rough implementation of a swapping feature. Setting the new "swap" option to true will cause a dragged item to be swapped with the item you drop it on (instead of inserted next to it). The item being hovered over (and potentially swapped with) will be highlighted by adding the class specified in the new "swapHighlightClass" option (defaults to "sortable-swap-highlight"). When swapping is enabled, the "end" event's "to" property will be set to the item being dropped on and swapped with.

It's a bit hackish, but it works as a solution to issues #1211, #1082, #1072, #891, #869, and #469. Maybe it can at least serve as a starting off point to adding this feature to master eventually? Thanks!

[fabiodev2grow]

This is roughly what I'm looking for. Any idea when this will be added to master?

[gazugafan]

My commit works, but it's a bit hackish and probably shouldn't be merged into master as it is. Would love if the feature could officially be adopted, though! Any thoughts, @RubaXa ?

[dnicastro]

Really awesome @gazugafan !! You've saved me!
That was what im looking for!

Im should exactly point the swapping element.
Otherwise it will only be added and not swapped.
My usecase: swapping between different < ul > lists and not between a single < ul > list

[RubaXa]

@gazugafan Please, create a demo (use case) on jsbin.com (draft)

[gazugafan]

Sure @RubaXa, here you go: http://jsbin.com/mewimar/edit

[dnicastro]

@RubaXa @gazugafan

I've added another example with multiple <ul>, which was my use case.
You see, the <li> size should cover the <ul> size. Otherwise you are not able to swap it.

http://jsbin.com/mewimar/edit?html,css,js,output

I just wanted to show that it works and how it works

[gazugafan]

I think you need to save a new version, @dnicastro

[RubaXa]

@gazugafan, @dnicastro try swap-branch: http://jsbin.com/gokeqevaxe/1/edit?html,js,output

[gazugafan]

WOW! 👍 👍 👍
The only problem might be with the end event... it looks like the "to" property is set to the entire UL instead of the specific LI that you've dropped on top of. When swapping, I can see it being very important to know which two items are being swapped. It certainly was in my use-case, at least.

[IntegerMan]

This is perfect! I'm on the angular sortable wrapper at the moment, but this branch is worth dropping that as needed to get the feature.

I'm hoping that this will work across lists so you can swap one item from one list with an item in another list.

Some context: I'm using Sortable to build out an inventory system for a game hobby project with a limited number of inventory and hotbar slots like follows:

Sortable is great for rearranging things and moving things between lists, but I never want to grow a list and always want to swap it.

[IntegerMan]

So, after playing with this a bit more, I am seeing some quirks here when working with two lists. Specifically, I'm seeing that the from and to are both the origin list when trying to swap an element from one list to another. I'm seeing some other issues as well, but I'm attributing those to dropping Angular SortableJS in order to try this preview build of SortableJS and losing the list synchronization features.

You can view the bug in action by going to http://www.matteland.com/Emergence/Nightly/ and pressing i or clicking on the i button on the right edge to bring up the inventory screen (WIP) which uses this build of sortablejs. Dragging / dropping from the top to the bottom grid will do the swap, but the event (logged to debug in the console) will have the to list incorrect.

[gazugafan]

@IntegerMan you'll probably want to make a boiled down version of your issue over at jsbin.com... Both so we can see and debug it easier, and to rule out the possibility of it being related to your project somehow.

@RubaXa this brings up a potential problem with my implementation related to my previous comment... I used the existing "to" property in the end event to hold the element being dropped onto. Instead of overwriting this existing property, though, I really should have added a new property. That way you can still access the list being dropped onto like normal.

[IntegerMan]

Voila. Check out http://jsbin.com/dukuzegehu/edit?html,js,console,output

[groucho75]

Hi, I'd like the swap feature. Any idea when this will be added to master?
Thanks again for your job

[dons20]

It's been 3 months, any word on this being added to master? Definitely a feature I'd love to use in my projects.

[muralibobby35]

I am using Rubaxa sortable with a swap feature. I am able to drag one list to another list but sometimes Onadd not working. Please check list1 to list2 is working but list2 to list1 Onadd event not working. the main thing is I want to change the HTML of list item on drop.

I need to sort on list1 only and swap in list2 only. i have to drag and drop from list1 to list2 and viceversa.,

if I allow max list item is 1 in list swap is not working.
like ```
group: {
name: 'neo' ,
put: function (to) {
return to.el.children.length < 1;
},
},

https://jsfiddle.net/xfuLezdk/2/

[muralibobby35]

I have fixed my previous problem but here i have an another issue. In below link i want to swap item1 and item2 but when i try to swap first it is placing in immediate empty slot and then it is swaping. i want to swap even if we have empty slots between the items. is it possible?

https://jsfiddle.net/h79km2ju/1/

[gazugafan]

@muralibobby35 Not sure I can help much, but can you start with this...
http://jsbin.com/gokeqevaxe/1/edit?html,js,output
... and boil down the changes needed to reproduce your problem to the bare minimum?

[muralibobby35]

Thanks for your reply. I have followed your instructions.but please check below url.
https://jsfiddle.net/h79km2ju/1/

You can start move and try to swap items in grid. Before swap , dragging item is taking imediate empty slot instead of swap. No doubt swapping is working perfect, but this scenario before swapping item is taking empty slot

[gazugafan]

Right, but that's not the case in RubaXa's example. Can you figure out the exact minimum thing to add or change in his example that would cause your problem to start occurring?

[muralibobby35]

Ok do you know how to fix this? I mean can you suggest us any idea

[muralibobby35]

I have tried it but finally I am thinking to look alternate source. Please let me know which is better and similar to rubaxa sortable?

[muralibobby35]

@RubaXa could you please help on this.

https://jsfiddle.net/h79km2ju/1/

You can start move and try to swap items in grid. Before swap , dragging item is taking imediate empty slot instead of swap. No doubt swapping is working perfect, but this scenario before swapping item is taking empty slot

[muralibobby35]

@gazugafan We are using multiple sortable lists. but in RubaXa's example, there is only one sortable list. Within that list, he is swapping. But in my case, I need empty slots and in empty slots, I have to add items from other lists. In below example, each box is sortable element.

https://jsfiddle.net/h79km2ju/1/

[muralibobby35]

You can check below code. If i drag item from one list to another list without dropping into new list , automatically on the fly item is taking place in one of the list on hovering. it should be fill after end of the drag right?

swap.zip

[gazugafan]

Swapping between lists seems to work fine...
http://jsbin.com/heqasogeci/1/edit?html,js,output

[leithonenglish]

How do I get access to this branch via npm

[gazugafan]

I think it would be something like this...
npm install git://github.com/RubaXa/Sortable.git#swap --save

[leithonenglish]

@gazugafan I try that and it says permission denied

[leithonenglish]

@gazugafan dude...I've done that same thing just minutes ago and got permission denied to the branch but it works now thanks!

[gazugafan]

@leithonenglish ¯\_(ツ)_/¯

[leithonenglish]

@gazugafan Hey so I'm trying to use it with angular-sortablejs and I had to extend an interface from their package to include the swap option but when I use it the swapping works but sometimes it doesn't. Sometimes it goes back to how it originally works. Any ideas. I know it's a little vague...

[gazugafan]

Not sure, @leithonenglish. Maybe angular-sortablejs re-creates the sortable.js object at some point and doesn't carry over the swap option because it doesn't know it exists? Just spitballing!

[gazugafan]

FYI for anyone following this: I just made a pull request that fixes up a few things on the swap branch. Hopefully they get merged in soon, and maybe even into master eventually! Until then, you can find my fixes here... https://github.com/gazugafan/Sortable/tree/swap

Should be able to install via npm with something like...
npm install git://github.com/gazugafan/Sortable.git#swap --save

Adds swapItem property to end event when swapping
Fixes bug with swapping animation when items are next to each other
Fixes bug when dragged item is the last sibling

[leithonenglish]

@gazugafan thanks

[GregPeden]

Sooooo... any reason why this hasn't been merged yet?

[gazugafan]

FYI for anyone still following this: I've updated the swap feature to work with the latest v1.8.1. It's available on the master branch of my fork here...
https://github.com/gazugafan/Sortable

Submitted an updated pull request, as well. Looks like SortableJS has a new/additional maintainer, so hopefully it gets merged in!