Possible to disable an <li> from being moved or sorted? #1021

Activity

1. Fenny commented on Jan 14, 2017

   

   Fenny

   on Jan 14, 2017

   More actions

   Same problem here, can't figure it out.
2. ulken commented on Jan 14, 2017

   

   ulken

   on Jan 14, 2017

   More actions

   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)

   👍React with 👍22Reacted by Craig Loftus, Miguel Stevens, Emmanuel Ouanounou, Carlos Rodríguez, Eden, Vitalii, 31453, CONG, Sofia Kritikou, Kesupile and 12 more

   🎉React with 🎉3Reacted by William McMurray, Luke Harby and Abdullah Calisir

   🚀React with 🚀1Reacted by Fatih Mert Doğancan
3. Fenny commented on Jan 16, 2017

   

   Fenny

   on Jan 16, 2017

   Last edited by Fenny

   More actions

   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.
4. ulken commented on Jan 16, 2017

   

   ulken

   on Jan 16, 2017

   More actions

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

   👍React with 👍1Reacted by Adrian Vignolo
5. Fenny commented on Jan 16, 2017

   

   Fenny

   on Jan 16, 2017

   More actions

   @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
6. ulken commented on Jan 21, 2017

   

   ulken

   on Jan 21, 2017

   More actions

   @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
7. RubaXa

   added

   invalid

   on Feb 16, 2017
8. RubaXa

   closed this as completedon Feb 16, 2017