实现拖拽元素互换位置的极简单Vue例子

本文适合和我一样初次学习的小白，所以会用一个非常简单的例子，大神请绕路！
下面是vue的一个例子（JS也可参考，因为vue本质上就是js框架）：

 <div id="app">
     <ul>
         <li v-for='item,index in list'
         draggable="true"
         @dragstart='handleDragStart(index)' 
         @dragover='handleDragOver($event)' 
         @drop='handleDragEnd(index)'>{{item}}</li>
     </ul>
 </div>

 <script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                list:['11111','22222','33333','44444','55555'],
                from:-1,
                to:-1
            },
            methods:{
                handleDragStart: function (index) {
					this.from = index
				},
				handleDragOver:function(event){
					event.preventDefault()
				},
				handleDragEnd: function (index) {
					this.to = index  //更新目标索引
					var value = this.list[this.to] //暂存
					this.list[this.to] = this.list[this.from]
					this.list[this.from] = value
                    console.log(this.list)
					this.from = -1  //复原from，准备下一次拖拽
					this.to = -1  //复原from，准备下一次拖拽
                    this.$forceUpdate()  //强制刷新，不刷新可能无法显示更新后的结果（因为list是数组类型，有时候无法实时更新）
				}
            }
        })
</script>

下面简单解释一下：
li元素的draggable属性只有设置为true，li元素才可能进行拖拽；
【@dragstart事件，@dragover事件，@drop事件】这三个事件是必写的，缺一不可。（但是远不止这三个事件，想深入了解可以参看下面给的链接。）
其中，
@dragstart事件是开始拖拽鼠标时触发的，可以用来获取起始的元素；
@dragover事件是当某被拖动的对象在另一对象容器范围内拖动时触发此事件，触发事件的响应方法中写的【event.preventDefault()】不可缺省，其作用是阻止元素发生默认的行为，比如阻止url的超链接（可参看jQuery event.preventDefault() 方法）；
@drop事件是拖拽结束释放鼠标时触发的，可以用来获取释放处的元素。

另外，对于想深入学习JS中实现元素拖拽的同学，有一篇详细描述其过程的文章可以参看：JS实现拖拽元素互换位置
菜鸟教程中也有一个较简单的例子：菜鸟课程相关文章