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.71k stars 106 forks source link

feat: extended SortalbeJS events with data attribute #139

Open NicolaiHorlacher opened 1 month ago

NicolaiHorlacher commented 1 month ago

Maybe this PR ist out of scope for vue-draggable-plus but I would like to see this or a similar feature in this library.

It's a hassle to implement custom logic on Sortable Events, because SortableJS only works on the DOM level. This Library works on a data level and delegates the DOM manipulation to Vue.js. It would be nice to get more data access in the emitted events on the component and in the callbacks in the composable.

vue.draggable.next implements this using a custom change event with references the underlying data.

vue-draggable-plus already uses a workaround to connect data to SortableEvents. Data is saved to the HTMLElement which is dragged. This is currently only used to insert data from draggable list to another.

This PR uses this method to expose the data to every SortableJs event. To make this work for all events the data needs to be attached in the onChoose event, because it's triggered before onStart.

During mergeOptions the passed options are extended with an data attribute that is read from the already extended HTMLElement.

With these changes it is much easier to implement side effects on SortableEvents. For example showing a push notification when an element is added to a list would be possible with:

@add="(e) => showNotification(e.itemData.name + ' was added')"

I`m open to suggestions on how this feature could be implemented in an more elegant way. This is the best I could come up with.

netlify[bot] commented 1 month ago

Deploy Preview for vue-draggable-plus ready!

Name Link
Latest commit 2fb5e2f03be32fdadd439f6ed8ac672f68261c19
Latest deploy log https://app.netlify.com/sites/vue-draggable-plus/deploys/664b98a91e83250008ac7c87
Deploy Preview https://deploy-preview-139--vue-draggable-plus.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Alfred-Skyblue commented 1 month ago

Thank you so much for your suggestion! I've been pondering whether to expose a getCurrentData function. I'm considering saving the currently dragged data externally during onStart, making it accessible within getCurrentData, and then destroying it in onEnd. Since we can only drag one item at a time, getCurrentData would always return the currently dragged item. Do you think this would be a better approach?