vue 两种拖拽插件及实现

vuedraggable 拖动后可以在updated中监听

vuedraggable 的拖动规则是：拖动元素后到新位置，后面元素依次退一个位置，如：

安装 vuedraggable ：

npm install vuedraggable  --save

在页面引用

import vuedraggable from 'vuedraggable';

 components: {vuedraggable},

awe-dnd 拖动后在mounted中this.$dragging.$on监听

awe-dnd拖动规则：只能直接拖动间隔一个位置的两个元素；超过一个位置，用两个中间元素作为桥梁交换位置
例如：

安装awe-dnd

npm install awe-dnd --save

在main.js 引入

import VueDND from 'awe-dnd'
Vue.use(VueDND)

细心的我提供了源码

VuedraggablePage .vue

<template>
  <el-container>
      <el-row>
        <el-col :span="6">
          <div class="wrapper-text">
            <transition-group>
              <div v-for="item in list" :key="item.text" class="item">
                <p :class="item.text">{{item.text}}</p>
              </div>
            </transition-group>
          </div>
        </el-col>
        <el-col :span="18">
          <vuedraggable class="wrapper" v-model="list">
            <transition-group>
              <div v-for="item in list" :key="item.text" class="item">
                <p :class="item.text">{{item.text}}</p>
              </div>
            </transition-group>
          </vuedraggable>
        </el-col>
      </el-row>
  </el-container>

</template>

<script>
import vuedraggable from 'vuedraggable';

export default {
  name: 'Vuedraggable',
  components: {vuedraggable},
  props: {
  },
  data() {
    return {
      list: [
        {
          text: 'Aquamarine'
        }, {
          text: 'Hotpink'
        }, {
          text: 'Gold'
        }, {
          text: 'Crimson'
        }, {
          text: 'Blueviolet'
        }, {
          text: 'Lightblue'
        }, {
          text: 'Cornflowerblue'
        }, {
          text: 'Skyblue'
        }, {
          text: 'Burlywood'
        }
      ]
    }
  },
  updated() {
    console.log(this.list)
  },
  methods: {
  }
}
</script>
<style scoped lang="scss">
.wrapper {
  margin: 30px;
  display: flex;
  justify-content: center;
  width: 100%;
  .item{
    font-size: 16px;
    font-weight: bold;
    width: 160px;
    height: 90px;
    margin: 10px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px slategrey solid;
  }
}
.wrapper-text {
  padding: 30px;
  .item {
    font-size: 20px;
    font-weight: bold;
    line-height: 40px;
  }

}

@each $color in Aquamarine, Hotpink, Gold, Crimson, Blueviolet, Lightblue, Cornflowerblue, Skyblue, Burlywood {
  .#{$color} {
    color: #{$color};
  }
}
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateY(100px);
}

.v-enter-active,
.v-leave-active {
  transition: all 1s ease;
}

.v-move {
  transition: all 1s;
}

.v-leave-active {
  position: absolute;
}
</style>

AweDndPage.vue

<template>
  <el-container>
    <el-row>
      <el-col :span="6">
        <div class="color-list-text">
          <div
              class="color-item"
              v-for="color in colors"
              :key="color.text">
            <div :class="color.text">
              {{color.text}}
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="color-list">
          <div
              class="color-item"
              v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
              :key="color.text">
            <div :class="color.text">
              {{color.text}}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

  </el-container>
</template>

<script>
export default {
  name: 'AweDndPage',
  data () {
    return {
      colors: [
        {
          text: 'Aquamarine'
        }, {
          text: 'Hotpink'
        }, {
          text: 'Gold'
        }, {
          text: 'Crimson'
        }, {
          text: 'Blueviolet'
        }, {
          text: 'Lightblue'
        }, {
          text: 'Cornflowerblue'
        }, {
          text: 'Skyblue'
        }, {
          text: 'Burlywood'
        }]
    }
  },
  mounted () {
    this.$dragging.$on('dragged', ({value}) => {
      console.log(value.list)
    })
    this.$dragging.$on('dragend', (res) => {
      console.error(res)
    })
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
.color-list {
  padding: 30px;

  .color-item {
    font-size: 16px;
    font-weight: bold;
    height: 90px;
    width: 160px;
    float: left;
    border: 1px slategrey solid;
    margin: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

.color-list-text {
  padding: 30px;

  .color-item {
    font-size: 20px;
    font-weight: bold;
    line-height: 40px;
  }

}

@each $color in Aquamarine, Hotpink, Gold, Crimson, Blueviolet, Lightblue, Cornflowerblue, Skyblue, Burlywood {
  .#{$color} {
    color: #{$color};
  }
}
</style>