vue拖拽插件vuedraggable

最近有项目需要用到拖拽改变树结构，给大家推荐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>

效果图：