How to use Vue to implement the drag and drop shuttle box function? Four ways to introduce

How to implement the drag and drop shuttle box function? The following article will introduce to you four ways to implement the drag and drop shuttle box function inVue. I hope it will be helpful to you.

[Related recommendations:vuejs video tutorial]

1. Use native js to implement drag and drop

Click to open the video for more detailed explanation

    
按住拖动
  

2. VUe uses js to implement drag and drop shuttle boxes

Rendering:

##3. Vue drag and drop component vuedraggable

vuedraggableis standard Component encapsulation, and draggable elements are placed ontransition-group, and the transition animation is better.

How to use:

yarn add vuedraggable import vuedraggable from 'vuedraggable';

When using it, you can bind local data in two directions through v-model. If you need to update or trigger an event monitored by the parent component, , you can emit it in updated().

Case:

4. Awe-dnd instruction encapsulation

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:

(Learning video sharing:

web front-end development,Basic programming video)

The above is the detailed content of How to use Vue to implement the drag and drop shuttle box function? Four ways to introduce. For more information, please follow other related articles on the PHP Chinese website!