Sortable: Possible to disable an <li> from being moved or sorted?

[notflip]

Is this possible?

[Fenny]

Same problem here, can't figure it out.

[ulken]

To prevent an item from being draggable, use the filter option. To prevent it from being sorted/moved, return false from within the onMove handler.

Example:

const sortable = new Sortable(el, {
    filter: '.disabled',
    onMove: event => {
         return !event.related.classList.contains('disabled');
    }
}

See http://jsbin.com/tuyafe/1/edit?js,output for a more comprehensive example (from the onMove docs in the README)

[Fenny]

Uhm, my disabled item is still being sorted even though it's purpose is to be a static trashcan when the other items are being dragged.

See my example : http://jsbin.com/yepujuv/edit?html,js,output

Hope you can help me out.

[ulken]

@Jad3z Give this a spin: http://jsbin.com/pebubimuya/1/edit?html,css,js,output

[Fenny]

@ulken It stopped from being sorted, but onAdd is not being triggered to delete the item on release.

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

[ulken]

@Jad3z Yeah, that's because when preventing sorting in onMove, you are making it _not_ move to the other list, therefore it is never added to it and onAdd never called.

As far as I can tell, Sortable is not really designed for your use case. You would have to add extra logic outside sorting in order for it to work. More specifically, setup drop listeners to tell if the item was dropped on the trash can.

Something like:

$on(document, 'pointerup', onDrop);

function onDrop(event) {
  var wasDroppedOnTrashCan = event.target === actionEl;
  if (wasDroppedOnTrashCan) {
    dragEl.parentNode.removeChild(dragEl);
  }
}

See: http://jsbin.com/lefahiyake/edit?js,console,output for a POC