项目要求实现按钮可拖拽的功能，了解了一下H5中关于拖拽的API并进行简单的应用。
一个简单的拖拽可以理解为几个不同的部分。
# 设置元素为可拖拽
以button 为例，要使该按钮可拖拽，需要将它的draggable 属性设置为true 。
<button draggable="true">
</button>
# 拽动什么
当元素被拖拽的时候会触发ondragstart 事件。监听这个事件，在事件发生时设置被拖拽的数据。
<button draggable="true" ondragstart="drag(event)" id="id1"></button>
function drag(ev) {
ev.dataTransfer.setData('text', ev.target.id)
}
# 放到何处
ondragover 规定在何处放置被拖动的数据。默认情况下无法将数据放置到其他元素中，如果要允许设置，就必须阻止对元素的默认处理方式。
<div ... ondragover="allowDrop(ev)"></div>
function allowDrop(ev) {
ev.preventDefault()
}
# 进行放置
当放置被拖动数据时，会触发drop 事件。
<div ... ondrop="drop(ev)"></div>
function drop(ev) {
ev.preventDefault(); // 避免浏览器对数据的默认处理(drop事件的默认行为是以链接的形式打开)
var data = ev.dataTransfer.getData('Text'); // 获取被拖动的数据
ev.target.appendChild(document.getElementById(data)); // 处理数据
}
以上是H5拖拽API的基本操作。
由于本项目使用vue 框架，在github 上找了一个简单易用的插件。
# Vue.Draggable
基本用法如下:
npm install vuedraggable --save
// yarn add vuedraggable
<draggable v-model="myArray" :options="{group:'people'}" @start="drag=true" @end="drag=false">
<div v-for="element in myArray">{{element.name}}</div>
</draggable>
import draggable from 'vuedraggable'
...
export default {
components: {
draggable,
},
...
同时支持vuex
computed: {
myList: {
get() {
return this.$store.state.myList
},
set(value) {
this.$store.commit('updateList', value)
}
}
}