[vue2] Use vuedraggable in vue to realize container draggability

document

https://www.itxst.com/vue-draggable/zaaeyv73.html

Install

npm install vuedraggable

import

Import in the vue page you need to use
Note that it should be imported in the form of component

<script>
import draggable from 'vuedraggable'
export default {
    
    
	components: {
    
    
       draggable
    },
    data() {
    
    
       return {
    
    
           list: [
               {
    
    id:1, name: "Java"},
               {
    
    id:2, name: "Python"},
               {
    
    id:3, name: "PHP"},
               {
    
    id:4, name: "C"}
           ]
       }
    },

easy to use

# draggable要包裹你的容器
# 绑定list，即可拖动的列表数据
# tag指定标签
# v-bind绑定拖动动画配置
<draggable 
	v-model="list"
	tag="div"
    v-bind="{
      animation: 200,
      group: 'description',
      disabled: false,
      ghostClass: 'ghost'
    }">
	# transition-group可以实现分组，可以不使用
    <transition-group>
    	# 到这一层的容器都可以实现拖拽了
        <el-card v-for="element in list" :key="element.id" class="box-card">
            <div class="element">
                <span>{
   
   {element.name}}</span>
            </div>
            <div class="del-button">
                <el-button icon="el-icon-close" circle size="mini" @click="delClass"></el-button>
            </div>
        </el-card>
    </transition-group>
</draggable>

demo

drag left and right

Set the two draggables to the same group to drag each other between the two draggables

<template>
  <div>
    <!--使用draggable组件-->
    <div class="itxst">
      <div style="padding-left:10px">add事件例子,左边往右边拖动试试看</div>
      <div class="col">
        <draggable v-model="arr1" group="itxst" @add="add1" animation="300">
          <transition-group>
            <div
              :class="item.id==1?'item forbid':'item'"
              v-for="item in arr1"
              :key="item.id"
            >{
   
   {item.name}}</div>
          </transition-group>
        </draggable>
      </div>
      <div class="col">
        <draggable v-model="arr2" group="itxst" @add="add2" animation="300">
          <transition-group>
            <div
              :class="item.id==12?'item2 forbid':'item2'"
              v-for="item in arr2"
              :key="item.id"
            >{
   
   {item.name}}</div>
          </transition-group>
        </draggable>
      </div>
    </div>
  </div>
</template>
<script>
//导入draggable组件
import draggable from "vuedraggable";
export default {
      
      
  //注册draggable组件
  components: {
      
      
    draggable
  },
  data() {
      
      
    return {
      
      
      //定义要被拖拽对象的数组
      arr1: [
        {
      
       id: 1, name: "www.itxst.com" },
        {
      
       id: 2, name: "www.jd.com" },
        {
      
       id: 3, name: "www.baidu.com" },
        {
      
       id: 5, name: "www.google.com" },
        {
      
       id: 4, name: "www.taobao.com" }
      ],
      arr2: [{
      
       id: 11, name: "常用菜单" }] 
    };
  },
  methods: {
      
      
    //拖拽完成事件
    add1(e) {
      
      
      console.log(e);
    },
    add2(e) {
      
      
      console.log(e);
    }
  }
};
</script>