Vue. draggable is a magic component that quickly implements list drags and drags, giving you more time to swipe. Vue. Draggable is a vue drag plug-in based on sortable.js. Mobile device support, drag and drop and select text, intelligent scrolling, drag and drop between lists, vuE2 transition animation compatibility, undo support, all in all, a very good VUE drag component.

installation

yarn add vuedraggable
npm i -S vuedraggable
Copy the code

Single drag

<template> <div> <draggable :list="list"> <div style="cursor: pointer" v-for="item in list" :key="item.id" : title="item.title" :name="item.id" > {{item.title}} </div> </draggable> </div> </template> <script> import draggable from "vuedraggable"; export default { components: { draggable }, data() { return { list: [ { title: "aaa", id: 1, }, { title: "bbb", id: 2}]}; }}; </script>Copy the code

Multiple columns drag

<template> <div> <! <div class="col"> <div class="title"> <div class="title"> group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd" > <transition-group> <div class="item" v-for="item in arr1" :key="item.id"> {{ item.name }} </div> </transition group> </draggable> </div> <div class="col"> <div class="title"> </div> <draggable V-model ="arr2" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd" > <transition-group> <div class="item" v-for="item in arr2" :key="item.id"> {{ item.name }} </div> </transition-group> </draggable> </div> </div> </template> <script> // Import draggable from "vuedraggable"; Export default {// register draggable components: {draggable,}, data() {return {drag: false, // define an array of objects to be dragged arr1: [{id: 1, name: "www.itxst.com" }, { id: 2, name: "www.jd.com" }, { id: 3, name: "www.baidu.com" }, { id: 4, name: "www.taobao.com" }, ], arr2: [ { id: 5, name: "www.google.com" }, { id: 6, name: "www.msn.com" }, { id: 7, name: "www.ebay.com" }, { id: 8, name: "www.yahoo.com" }, ], }; }, methods: {onStart() {this.drag = true; }, // drag end event onEnd() {this.drag = false; ,}}}; </script> <style scoped> /* Define the style of the element to drag */. GhostClass {background-color: blue! important; } .chosenClass { background-color: red ! important; opacity: 1 ! important; } .dragClass { background-color: blueviolet ! important; opacity: 1 ! important; box-shadow: none ! important; outline: none ! important; background-image: none ! important; } .itxst { margin: 10px; } .title { padding: 6px 12px; } .col { width: 40%; flex: 1; padding: 10px; border: solid 1px #eee; border-radius: 5px; float: left; } .col + .col { margin-left: 10px; } .item { padding: 6px 12px; margin: 0px 10px 0px 10px; border: solid 1px #eee; background-color: #f1f1f1; } .item:hover { background-color: #fdfdfd; cursor: move; } .item + .item { border-top: none; margin-top: 6px; } </style>Copy the code

Mix tag and componentData with components

<template> <div style="margin: 20px"> <draggable tag="el-collapse" :list="list" :component-data="{ on: { change: this.inputChanged, }, props: { value: this.activeNames, }, }" > <el-collapse-item v-for="item in list" :key="item.id" :title="item.title" :name="item.id" > <draggable :list="item.text"> <div style="cursor: pointer" v-for="(lign, idx) in item.text" :key="idx" > {{ lign }} </div> </draggable> </el-collapse-item> </draggable> </div> </template> <script> import draggable from "vuedraggable"; Export default {components: {draggable}, data() {return {list: [{title: "级", id: 1, text: [" test 001 ", "test" 002],}, {title: "secondary", id: 2, text: [" test 003 ", "test 004"],},], activeNames: [1, 2]}. }, methods: { inputChanged(val) { this.activeNames = val; ,}}}; </script>Copy the code

This is the basic usage of vue.draggable. In addition, vue.draggable also supports table dragging, style modification, event listening, etc. Please refer to the Vue. draggable Chinese documentation for more usage

‐ ^ ▽ ^ ‐