Vue. draggable is a magic component that allows you to quickly drag and drop lists, giving you more time to paddle. Vue. Draggable is a vue draggable plug-in based on sortable.js. Support for mobile devices, drag and select text, smart scrolling, drag and drop between lists, vuE2 transition animations, undo support, vue.draggable is a great drag and drop component. Here are the basics:
installation
yarn add vuedraggable
npm i -S vuedraggable
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>
Multiple columns drag
<template> <div> <! <div class="title"> draggable v-model=" arR1" 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 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> </div> </template> <script "vuedraggable"; Export default {// register draggable components: {draggable,}, data() {return {drag: false, // define array of objects to drag 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: {// Start the drag event onStart() {this.drag = true; }, // Drag the end event onEnd() {this.drag = false; ,}}}; < span style = "box-sizing: border-box! Important; word-wrap: break-word! Important;" > < span style = "box-sizing: border-box! Important; 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>
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: "level 1 ", 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>
The draggable draggable also supports dragging tables, style modification, event monitoring and other functions, more usage please refer to the ue. Draggable Chinese documents heard that the friend who likes this year can go big good news! (‐ ^ ▽ ^ ‐)