vue利用html5拖放實現拖拽

HTML 拖放（Drag and Drop）接口使應用程序能夠在瀏覽器中使用拖放功能。

一、拖拽事件

1、drag：當拖動元素或選中的文本時觸發。

2、dragend：當拖拽操作結束時觸發

3、dragenter：當拖動元素或選中的文本到一個可釋放目標時觸發

4、dragexit：當元素變得不再是拖動操作的選中目標時觸發

5、dragleave：當拖動元素或選中的文本離開一個可釋放目標時觸發

6、dragover：當元素或選中的文本被拖到一個可釋放目標上時觸發（每100毫秒觸發一次）

7、dragstart：當用戶開始拖動一個元素或選中的文本時觸發

8、drop：當元素或選中的文本在可釋放目標上被釋放時觸發

二、拖拽接口

dragEvent：是一個表示拖、放交互的一個DOM event接口，它有一個構造函數和一個dataTransfer屬性，dataTransfer 屬性是一個DataTransfer  對象。


DataTransfer對象包含了拖拽事件的狀態，例如拖動事件的類型（如拷貝 copy 或者移動 move），拖動的數據（一個或者多個項）和每個拖動項的類型（MIME類型）。 DataTransfer對象也有向拖動數據中添加或刪除項目的方法。

三、vue中代碼實現

<template>
  <transition-group tag="div" name="drag" class="box">
    <div
      v-for="(item, index) in list"
      :key="item"
      class="item"
      :draggable="true"
      @dragstart="dragStart($event, index)"
      @dragover="allowDrop"
      @drop="drop($event, index, list)"
    >
      {{ item }}
    </div>
  </transition-group>
</template>
<script>
export default {
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    };
  },
  methods: {
    //取消默認行為
    allowDrop(e) {
      e.preventDefault();
    },
    //開始拖動
    dragStart(e, index) {
      e.dataTransfer.setData("index", index);
    },
    //放置
    drop(e, index, data) {
      this.allowDrop(e);
      const dragIndex = e.dataTransfer.getData("index");
      const temp = data.splice(dragIndex, 1);
      data.splice(index, 0, temp[0]);
    }
  }
};
</script>
<style scoped>
.box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 330px;
  margin: 0 auto;
}
.item {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  line-height: 100px;
  text-align: center;
}
.drag-move {
  transition: transform 1s;
}
</style>