Bug: Attempting to disable dragging conditionally on an element in a list of items results in the entire list being non-draggable.
andrew-boyd opened this issue · comments
Attempting to re-work the draggable example in the docs. You can see the reproduction on the feature/no-drag branch
Facing the same issue. Basically:
draggabledoes allow to exclude additional elements inside the parent to not be draggable- but it does not allow to disabled one of the value list items as otherwise it will throw this console error
Is this intended or a bug? The use case is a dynamic list of object as values where a property of the object can define whether this specific object is sortable or not.
@distantnative Your bullet points break down the issue well. I wouldn't consider it a bug but more of a poorly thought out API. If I had the opportunity to do it over again, I think I would have a separate callback function for the first bullet point, and draggable would be a callback function for the second. Even then, there is some more granularity to consider: what if the developer also wants to prevent the given element from being sorted as well?
In the meanwhile while I mull this over, my suggestion would be to override event handlers and write your own logic to determine whether a given node should be draggable or sortable. I've created a small playground on the docs you can view here playground (should be more viewable in light-mode). Here's the link to the code: (https://github.com/formkit/drag-and-drop/blob/main/docs/pages/issue-12.vue)
@sashamilenkovic thanks for the quick reply and even more for providing a workaround
@sashamilenkovic thanks for the quick reply and even more for providing a workaround
No problem at all! Let me know if you have any questions about the implementation/see any issues with it.