github.com/zjffun/vue-shopify-draggable ↗
Vue component of Shopify draggable.
Open this visualization on its own page →
Contributors
2
Lines of Code
63
From
2020-09-30
To
2021-01-17
About zjffun/vue-shopify-draggable
Vue-shopify-draggable is a Vue component wrapper around Shopify's draggable library, providing an easy way to integrate drag-and-drop functionality into Vue applications. The package exposes five main components: vue-sortable, vue-swappable, vue-droppable, vue-draggable, and vue-draggable-container, each corresponding to different dragging behaviors from the underlying Shopify library.
The components support comprehensive configuration through props like options and tag, allowing developers to customize wrapper elements and behavior. They emit a full suite of events covering the drag lifecycle (drag:start, drag:move, drag:stop), sorting operations (sortable:start, sortable:sort, sortable:sorted), swapping (swappable:swap, swappable:swapped), and dropping interactions (droppable:dropped, droppable:returned). The library also supports plugin events from Shopify's official plugins including mirror, collidable, and snap functionality.
The package is available via npm and CDN, with support for both Vue 2 and Vue 3, and includes options for flexible component registration. Developers can use individual components separately or register them globally, and have the option to avoid wrapper DOM generation by setting an empty string for the tag property.