Vue拖拽事件实现穿梭框效果

Vue拖拽

1、HTML代码

<div id='app'>
  <div class="wrap">
    <!-- .prevent表示阻止默认事件 -->
    <!-- .self指定事件仅对当前元素有效 -->
    <div class="left" @dragover.prevent='over' @drop.prevent.self='drop'>
      <!-- draggable属性，指定当前元素可拖拽 -->
      <div v-for="item in list1" draggable @dragstart='start' v-text='item'></div>
    </div>
    <div class="right" @dragover.prevent='over' @drop.prevent.self='drop'>
      <div v-for="item in list2" draggable @dragstart='start' v-text='item'></div>
    </div>
  </div>
</div>

2、CSS代码

.wrap {
  width: 800px;
  height: 100%;
  margin: 0 auto;
  border: 2px solid #ccc;
  display: flex;
}
.wrap>div {
  flex: 1;
  border: 1px solid #ccc;
  height: 1000px;
}
.wrap>div.left>div {
  background: rgba(100,0,0,0.5);
}
.wrap>div.right>div {
  background: rgba(0,0,100,0.5);
}
.wrap>div>div {
  line-height: 60px;
  text-align: center;
  border: 1px solid #ccc;
  margin: 5px;
  font-size: 20px;
  font-weight: bold;
}

3、JS 代码

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
// 创建vue实例
var app = new Vue({
  el: '#app',
  data: {
    list1: [1,2,3,4,5],
    list2: [6,7,8]
  },
  methods: {
    start(ev) {
      // 获取被拖拽的元素
      this.dom = ev.currentTarget
    },
    over(ev) {
      console.log('over')
    },
    drop(ev) {
      // 把被拖拽的元素追加到容器中去
      ev.target.appendChild(this.dom)
    }
  }
})
</script>

参考资源： HTML5 拖放

END 2020-01-08