Home> Web Front-end> Vue.js> body text

How does Vue implement the drag and drop shuttle box function? Four ways to share (with code)

青灯夜游
Release: 2022-10-01 07:00:26
forward
2247 people have browsed it

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!

How does Vue implement the drag and drop shuttle box function? Four ways to share (with code)

1. Use native js to implement drag and drop

Click to open the video for more detailed explanation

 Lazyload   
按住拖动
Copy after login

2. VUe uses js to implement drag-and-drop shuttle box

  
Copy after login

Rendering:
How does Vue implement the drag and drop shuttle box function? Four ways to share (with code)

3. Vue drag and drop component vuedraggable

vuedraggableis 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';
Copy after login

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:

  
Copy after login

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
Copy after login

main.js

import VueDND from 'awe-dnd' Vue.use(VueDND)
Copy after login

Case:

  
Copy after login

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!

Related labels:
source:cnblogs.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn