VueHow to implement the drag and drop shuttle box function in the project? The following article will share with you four ways to implement the drag and drop shuttle box function in Vue. I hope it will be helpful to you!
Click to open the video for more detailed explanation
Lazyload 按住拖动
拖拽穿梭框
{{ item.label }} X >{{ item.label }} X >
Rendering:
vuedraggable
is a standard component package, and draggable elements are placed abovetransition-group
, transition animations are better. [Related recommendations:vuejs video tutorial]
Usage:
yarn add vuedraggable import vuedraggable from 'vuedraggable';
When in use, you can use v-model for two-way binding Local data, if you need to update it or trigger an event monitored by the parent component, you can emit it in updated().
Case:
{{ drag ? "拖拽中" : "拖拽停止" }} {{ element.name }}{{ color.text }}
The name of the npm package of vue-dragging is awe -dnd is not vue-dragging. The characteristic of this library is that it encapsulates v-dragging global instructions, and then uses global instructions to perform data binding, etc.
Compared with vuedraggable, awe-dnd does not have two-way binding (the absence of two-way binding here is not very rigorous, to be precise, there is no way to expose two-way binding), so it provides events. It is used to update the list when dragging ends (no need to manually update the list, in fact, two-way binding is implemented internally) or to trigger events listened by the parent component.
Installation dependencies:
npm install awe-dnd --save yarn add awe-and
main.js
import VueDND from 'awe-dnd' Vue.use(VueDND)
Case:
{{ color.text }}
If it is helpful to you, please click to jump to station B with three clicks! Thanks for the support! ! !
(Learning video sharing:web front-end development,Basic programming video)
The above is the detailed content of How does Vue implement the drag and drop shuttle box function? Four ways to share (with code). For more information, please follow other related articles on the PHP Chinese website!