vue拖拽div

下载安装

    yarn add vuedraggable

参考

https://sortablejs.github.io/Vue.Draggable/#/clone
http://www.ptbird.cn/vue-draggable-dragging.html

使用

import vuedraggable from 'vuedraggable';

页面

<template>
  <div class="test-vuedraggable-box">
    <div class="tvg-box tvg-box1">321321321</div>
    <div class="tvg-box tvg-box2">99999</div>
    <vuedraggable class="wrapper" v-model="list">
      <transition-group>
        <div v-for="item in list" :key="item" class="item">
          <p>{{item}}</p>
        </div>
      </transition-group>
    </vuedraggable>
  </div>
</template> 

<script>
import vuedraggable from 'vuedraggable'
export default {
  name: 'HelloWorld',
  components: { vuedraggable },
  props: {},
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6],
    }
  },
  updated() {
    console.log(this.list)
  },
  methods: {},
}
</script> 
<style lang="less" scoped>
.test-vuedraggable-box {
  background-color: rgba(138, 158, 218, 0.8);
  .tvg-box {
  }
  .tvg-box1 {
    background-color: rgba(218, 138, 158, 0.8);
  }
  .tvg-box2 {
    background-color: rgba(138, 218, 158, 0.8);
  }
  .wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .item {
    width: 300px;
    height: 50px;
    background-color: #42b983;
    color: #ffffff;
    border: 1px solid rgba(199, 178, 15, 0.9);
  }
}
</style>