search

Alfred-Skyblue / vue-draggable-plus

Universal Drag-and-Drop Component Supporting both Vue 3 and Vue 2
https://vue-draggable-plus.pages.dev/en/
MIT License
2.72k stars 106 forks source link

Initiate dragging only on specific child element #68

Closed MartinMalinda closed 7 months ago

MartinMalinda commented 7 months ago

Hi!

Thank you for this library. For optimal UX I need to initiate dragging only when a specific child button is being dragged, similarly how it's done on many other sites, for example Airtable:

Screenshot 2023-12-08 at 17 45 59

Notice the grid dot icon on the right side, the element is draggable only when held there.

Is there a way to implement this via vue draggable plus? An ideal solution for me would be to use some specific template slot, and if the template slot exists, the component would only initiate dragging on that child element.

Thanks a lot!

MartinMalinda commented 7 months ago

The reason why I'm specificly looking for this is because otherwise the dragging gets initiated way too easily and clicks get ignored (I have force-fallaback true to have autocroll) or selecting text in inputs can't be done.

Alfred-Skyblue commented 7 months ago

To enable drag-and-drop functionality within a specific element, you should pass the handle attribute.

https://alfred-skyblue.github.io/vue-draggable-plus/en/demo/handle/

MartinMalinda commented 7 months ago

perfect, thank you!