鍍金池/ 問答/HTML/ vue-dragging --使用問題

vue-dragging --使用問題

<script>
export default {
data () {

return {
    colors: [{
        text: "Aquamarine"
    }, {
        text: "Hotpink"
    }, {
        text: "Gold"
    }, {
        text: "Crimson"
    }, {
        text: "Blueviolet"
    }, {
        text: "Lightblue"
    }, {
        text: "Cornflowerblue"
    }, {
        text: "Skyblue"
    }, {
        text: "Burlywood"
    }]
}

}
}
</script>
<div class="color-list">

<div 
    class="color-item" 
    v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
    :key="color.text"
>{{color.text}}</div>

</div>
export default {
mounted () {

this.$dragging.$on('dragged', ({ value }) => {
  console.log(value.item)
  console.log(value.list)
  console.log(value.otherData)
})
this.$dragging.$on('dragend', () => {
    
})

}
}
但是如果數(shù)據(jù)結(jié)構(gòu)是下面這種該如何排序？

data:[
  {
    name: '財(cái)務(wù)數(shù)據(jù)分析',
    children: [
      {
        name: '工資',
        path: '/nav/dashboard/dash1'
      }, {
        name: '報(bào)銷',
        path: '/nav/dashboard/dash2'
      }
    ]
  },
回答
編輯回答
只愛你

把主要的代碼都寫這了，其余代碼不要也罷，這樣就能實(shí)現(xiàn)拖拽，但是提前是你已經(jīng)安裝且導(dǎo)入了vue-dragging插件

<div  
    v-for="color in children" 
    v-dragging="{ item: color, list: children}"
    :key="color.name">
    {{color.name}} + {{color.path}}
</div>
2017年1月4日 21:29