Install vue-draggable-plus via npm
mainInstall the package using npm to add drag-and-drop sorting capabilities to your Vue project (supports Vue >= v3 or Vue >= 2.7).
npm install vue-draggable-plusvue-draggable-plus
repository·main·Indexed 26 days ago
https://github.com/alfred-skyblue/vue-draggable-plusA universal drag-and-drop sorting module for Vue (v2.7+ and v3+) based on Sortablejs. It provides multiple implementation methods including a VueDraggable component, a composable useDraggable function, and a directive. The library supports two-way binding via v-model, customizable dragging behavior, group configurations for inter-list movement, and a comprehensive set of event hooks such as onStart, onEnd, and onMove.
What's inside vue-draggable-plus
Implement draggable table rows with vue-draggable-plus
mainYou can implement draggable table rows by designating the<tbody>element as thetarget-container. This allows users to reorder rows via drag-and-drop. There are three ways to achieve this: using the component wrapper, using the functional API, or using the directive.Implement table column drag and drop
mainTo implement drag and drop for table columns, specify the table's<thead>element as thetargetcontainer. This allows users to reorder columns by dragging the header cells.Implement double list drag and drop sorting
mainYou can implement drag and drop sorting between multiple lists usingvue-draggable-plusvia three different methods: Component usage, Function usage, or Directive usage. All methods support two-way data binding to synchronize the state of the lists during drag-and-drop operations.Specify the target container using the `target` attribute
mainWhen draggable elements are not immediate children of the draggable component, you must specify a target container to enable drag functionality. You can do this by providing a selector to thetargetattribute. Ensure the selector correctly identifies the intended container element.Use the `target` option with the functional API
mainWhen using the functional API (e.g.,
useDraggable), you can pass atargetselector to specify the container. To ensure accuracy, you can use an ID selector (e.g.,#my-container) for the target element.Important Requirement: When using the functional API, your component must have exactly one root element. If the component has multiple root elements, the functional logic may fail to correctly identify or manage the target container.
<!-- Correct usage with a single root element --> <template> <div> <div id="my-container"> <ElTable :list="list" /> </div> <div class="flex justify-between"> <pre class="code-block">{{ text }}</pre> </div> </div> </template> <!-- Incorrect usage with multiple root elements --> <template> <div id="my-container"> <ElTable :list="list" /> </div> <div class="flex justify-between"> <pre class="code-block">{{ text }}</pre> </div> </template>Clone nodes using Component, Function, or Directive
mainCustom cloning can be implemented across the three primary usage patterns of
vue-draggable-plus:- Component Usage: Pass the
clonefunction as a prop to the draggable component. - Function Usage: Pass the
cloneoption when using the programmatic API. - Directive Usage: Pass the
cloneoption within the directive configuration.
- Component Usage: Pass the
Implement mixed animations for drag-and-drop transitions
mainTo create smooth visual transitions during drag-and-drop operations, use theanimationproperty to handle the transition effect when items are being reordered, and thetransitionproperty to handle the effect when items are being restored to their original positions.Implement custom node cloning
mainYou can customize how nodes are cloned by passing a function to the
cloneproperty. This is particularly useful in low-code scenarios, such as dragging form elements onto a canvas where a new component instance must be created.By default, the library uses
JSON.parse(JSON.stringify())for cloning, but you can provide your own logic using libraries likelodashor other deep-cloning utilities.Requirements for Cloning
To ensure cloning works correctly, you must satisfy these two conditions:
- The
pullproperty within thegroupconfiguration of the item being cloned must be set to'clone'. - The
nameproperty within thegroupconfiguration must be identical for both the source item and the target container.
Important Note on Keys
When using a custom
clonefunction, you must generate a new uniquekeyfor the cloned item within the function. Failing to do so will result in component rendering errors.- The
Configure drag handles via Function Usage
mainWhen using the functional API, you can pass a function to thehandleoption. This function allows for dynamic logic to determine if an element should act as a drag handle.Enable Drag Clone functionality
mainTo enable dragging an item from one list to another while keeping the original item in its source list, use the
cloneattribute.By default, the library uses
JSON.parse(JSON.stringify())to perform the clone. If you require a custom cloning logic, pass a custom function to thecloneattribute.Critical Requirements for Cloning:
- Group Pull Setting: The
pullproperty within thegroupattribute of the component must be set to'clone'. - Group Name Consistency: The
nameproperty within thegroupattribute must be identical across both the source and target lists. - Unique Keys: When using the
cloneattribute, you must regenerate a uniquekeyfor the cloned item to prevent abnormal component rendering.
- Group Pull Setting: The
Implement transition animations with vue-draggable-plus
mainYou can implement transition animations during drag-and-drop operations by wrapping your draggable elements or containers with Vue's
<TransitionGroup>component. This works across all three usage modes: Component, Function, and Directive.Component Usage
Wrap your list items within a
<TransitionGroup>component to enable smooth entry/exit and movement animations when the list order changes.Function Usage
When using the programmatic API (functions), ensure the underlying list being manipulated is wrapped in a transition component to reflect changes visually.
Directive Usage
When using the
v-draggabledirective, the elements being moved should be children of a<TransitionGroup>to support transition effects during the drag-and-drop process.