Repository navigation
Keep filtered items position from changing when dragging other items #347
Description
Can we make it so filtered items keep their position relative to other items in the list.
For example:
Before sort
1. Sortable 1
2. Filtered
3. Sortable 2
4. Sortable 3
After sort
3. Sortable 2
2. Filtered
1. Sortable 1
4. Sortable 3
Here we've moved number 1 to position three and number 3 to position 1. Even if we try to move it to position 2 it should not work, filtered items should be removed from the sortable list. Much like they are pinned in place.
Similar to this issue: #273
So my real question: is there a way to do this right now?
Activity
RubaXa commentedon Apr 14, 2015
Nope.
RubaXa commentedon Apr 15, 2015
dev-branch: http://jsbin.com/tuyafe/1/edit?html,js,output
#347: + moveVector
RubaXa commentedon Apr 15, 2015
@MaazAli http://jsbin.com/tuyafe/2/edit?js,output — this is what you had in mind?
MaazAli commentedon Apr 15, 2015
That's perfect, will test it out and report back 👍
EDIT
@RubaXa I'm seeing a slight problem with this approach. What if I have an arbitrary amount of disabled items in the list. I was looking for a solution of some type were you can just have a selector like you have for
filterbut you can also say that those elements cannot act as drop targets.Here is a cloned JS bin where I have multiple amount of disabled items, and for each of them I'd rather not go in and do if and else if.
http://jsbin.com/kubiriruyo/1/edit
For example:
Take a look at this: https://jqueryui.com/sortable/#items
The first one where the items aren't sortable and they don't act as drop targets. That's essentially the same thing as what you've got in your JS bin. The only difference is the API. All you have to do is specify which items are actually sortable, the rest will be disabled where they won't act as drop targets neither will they be sortable.
So maybe what we want to have is another option like:
freeze: '.disabled'and all items that have that selector will be frozen in place where they can't be sortable and neither can they act as drop targets. That or we can makefilterhave the functionality of making items not act as drop targets as well.RubaXa commentedon Apr 16, 2015
https://jqueryui.com/sortable/#items — this example is not the same thing.
You can do the same using the option
draggable.RubaXa commentedon Apr 16, 2015
@MaazAli Still it is possible to alter my example and make it work with an arbitrary number of frozen objects: http://jsbin.com/quvuwi/2/edit?js,output
shanswami commentedon May 8, 2015
I have a similar issue. my div structure is as follows
and i want to use the same logic you've posted in your jsbin to keep the footer fixed. However in my sortable options, the onMove function doesn't seem to do anything. is it not supported in angular?
markudevelop commentedon Aug 16, 2015
+1 this is an awesome features I use
divsand have a<h4>tag before each div that I want o skip from sorting it out. Just needs to be static :)people-sea commentedon Feb 2, 2026
I made a plugin for this: sortablejs-pinned
It's a post-hoc fix — restores comment nodes after SortableJS moves them. Not ideal, but works until SortableJS handles this natively.