vue2.0使用Sortable.js实现的拖拽功能示例

<draggable :list="list2" :move="getdata" @update="datadragEnd" :options="{animation: 300,handle:'.dargDiv'}">
    <transition-group name="list-plete" >
      <div v-for="element in list2" :key="element.it.name" class="list-plete-item">
        <div class="styleclass dargDiv">{{element.id}}</div>
        <div class="styleclass">{{element.it.name}}</div>
      </div>
    </transition-group>
  </draggable>

 body{
  font-family:'微软雅黑'
}
[v-cloak]{
  display:none;
}
#example{
  width:1000px;
  margin:0 auto;
}
.list-plete-item {
 transition: all 1s;
  height:50px;
  line-height: 50px;
  background: #000;
  color:#fff;
  text-align: center;
  font-size:24px;
  margin-:10px;
}
.styleclass{
  width:100px;
  float:left;
}
.list-plete-enter, .list-plete-leave-active {
 opacity: 0;
 height: 0px;
 margin-: 0px;
 padding: 0px;
 border: solid 0px;
}
.list-plete-sortable-chosen,.list-plete-sortable-ghost{
 opacity: 0;
 height: 0px;
 margin-: 0px;
 padding: 0px;
 border: solid 0px;
}
.dargDiv{
  cursor:move;
  background:red;
}
.wrods{
  margin-:50px;
}
p{
  line-height:24px;
  text-align:center;
}

require.config({
  urlArgs: "ver=1.0_0",
  
  paths:{
    "vue":'vue.min2',
    "sortablejs":'Sortable',
    "vuedraggable":'vuedraggable'  
  },
  shim:{
    'vue':{
      exports:'vue'
    } 
  }
}),

require(['vue','vuedraggable'],function(Vue,draggable){
  Vue.ponent('draggable', draggable);
   new Vue({
    el: '#example',
    data: {
      list2:[
      {id:"id1",it:{name:'bbbb'}},
      {id:"id2",it:{name:'2222'}},
      {id:"id3",it:{name:'3333'}},
      {id:"id4",it:{name:'4444'}}
      ]
    },
    methods:{
      getdata: function(evt){
        console.log(evt.draggedContext.element.id);
      },
      datadragEnd:function(evt){
        console.log('拖动前的索引'+evt.oldIndex);
        console.log('拖动后的索引'+evt.newIndex);
        
      }
      
    }
  })
  
})