Keep filtered items position from changing when dragging other items

[MaazAli]

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?

[RubaXa]

Nope.

[RubaXa]

Similar to this issue: #273

dev-branch: http://jsbin.com/tuyafe/1/edit?html,js,output

[RubaXa]

@MaazAli http://jsbin.com/tuyafe/2/edit?js,output — this is what you had in mind?

[MaazAli]

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 filter but 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 make filter have the functionality of making items not act as drop targets as well.

[RubaXa]

https://jqueryui.com/sortable/#items — this example is not the same thing.
You can do the same using the option draggable.

[RubaXa]

@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]

I have a similar issue. my div structure is as follows

<ul ng-sortable="sortableOptions">
  <li ng-repeat="image in $parent.images">
    <somecontent></somecontent>
  </li>
  <li class="footer">
    <li>some item </li>
  </li>
</ul>

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]

+1 this is an awesome features I use divs and have a <h4> tag before each div that I want o skip from sorting it out. Just needs to be static :)

[people-sea]

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.