Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of Vue draggable how to achieve the drag function from left to right, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this Vue draggable article on how to drag and drop from left to right. Let's take a look.

The specific effects are as follows

1. Install the plug-in

Npm install vuedraggable

2. Introduce in the components that need to be used

Import draggable from 'vuedraggable'

3. Register the component

Components: {undefineddraggable}

Example:

{{d.name}} {{d.name}} import draggable from "vuedraggable" Export default {data () {return {list1: [{name: "11", id: 1}, {name: "22", id: 2}, {name: "33", id: 3}, {name: "44", id: 4},], list2: [{name: "5", id: 5}, {name: "6" Id: 6}, {name: "7", id: 7},],} }, components: {draggable,}, computed: {dragOptionsL () {return {disabled: false, ghostClass: "ghostL", / / Note: use this class when moving up and down on the left When moving to the right, use the ghostR class};}, dragOptionsR () {return {animation: 500, disabled: false, ghostClass: "ghostR", / / Note: use this class when moving up and down on the right;},}, methods: {toChange (e) {console.log (e) If (e.added) {console.log (this.list2);}; .test-left {float: left; width: 300px;} .test-right {float: left; margin-left: 20px; width: 300px;} .test-right > div {min-height: 80px; / * to prevent you from dragging * /}. Item {width: 100%; height: 60px Line-height: 60px; background: # f2f2f2; margin-bottom: 12px;}. GhostL {opacity: 0.5; width: 230px;} .ghostR {opacity: 0; width: 230px;}

Note:

1. Left draggle plug-in,: group= "{name: 'dragobj', pull:' clone', put: false}"

{name: 'dragobj' with the same name can be dragged back and forth; pull:' clone' is cloned from left to right, and then the left data is hidden with the dragChangeR () method of the right draggle plug-in. Left does not really delete this data; put: false forbids dragging and dropping data from right to left}

Sort: false in 2.options means no dragging up or down

3. Problem: when you move from left to right, the name value of items always appears on the right. After dragging, the name value disappears

Solution: bind a vmurbind = "dragOptionsL" and "dragOptionsR" to the left and right respectively.

4. Problem: when there is no items on the right, you need to specify a min-height to the parent element of the v-for loop on the right. Otherwise, when dragging from the left to the right, there is no place to receive it, then the drag and drop will not work.

This is the end of the article on "how to drag and drop from left to right in Vue draggable". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to drag and drop from left to right in Vue draggable". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.