|
最近有项目需要用到拖拽改变树结构，给大家推荐vue的插件库vuedraggable（gitHub:https://github.com/SortableJS/Vue.Draggable
），这个插件是基于sortable.js（gitHub:https://github.com/RubaXa/Sortable），所以这个options里面的配置，和sortable.js是一样的。
下面是一个简单的例子：
首先安装插件：npm install vuedraggable -S
使用具体代码片段：
<template>
<div class="index-wrap">
<div class="index-left">
<div class="index-left-block lastest-news">
<h2>拖动的块块</h2>
<ul>
<draggable v-model="newsList" @update="datadragEnd" :options = "{animation:500}">
<transition-group>
<li v-for="item in newsList" :key="item.id" class = "drag-item">
<div class="new-item">{{ item.title }}</div>
</li>
</transition-group>
</draggable>
</ul>
</div>
</div>
</div>
</template>
<script>
//引入插件
import draggable from 'vuedraggable'
export default {
//注册组件
components: {
draggable
},
created: function () {
this.$http.get('api/getNewsList')
.then((res) => {
this.newsList = res.data
}, (err) => {
console.log(err)
})
},
mounted () {
//为了防止火狐浏览器拖拽的时候以新标签打开
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
}
},
data () {
return {
newsList: []
}
}
},
methods:{
datadragEnd (evt) {
evt.preventDefault();
console.log('拖动前的索引 :' + evt.oldIndex)
console.log('拖动后的索引 :' + evt.newIndex)
//打印出新的树结构
console.log(this.newsList);
}
}
}
</script>
<style scoped>
.drag-item{
width: 200px;
height: 50px;
line-height: 50px;
margin: auto;
position: relative;
background: rgb(118, 226, 240);
margin-top:20px;
}
</style>
效果图：
| 
转播
