DEMO-拖拽插件

Vue的拖拽插件
拖拽插件

vuedraggable 方式
是标准的组件式封装，并且将可拖动元素放进了transition-group上面，过渡动画都比较好
vuedraggable拖动可以在updated中监听到
vuedraggable的拖动规则是 拖动元素后到新位置，后面元素依次退了一个位置

1. 安装
npm install vuedraggable --save
2. 引入
import vuedraggable from 'vuedraggable'
components: {vuedraggable}

// 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>

Awe-dnd方式

awe-dnd和vuedraggable的不同在于，不是直接双向绑定的列表元素，自己提供了事件，在拖拽结束的时候用来更新列表

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

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

//  1.安装
npm install awe-dnd --save

// 2.main.js引入
import VueDND from 'awe-dnd'
Vue.use(VueDND)

// 3. 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>