parent
9ddf0f046d
commit
18bde351e0
3 changed files with 49 additions and 3 deletions
@ -1,15 +1,51 @@ |
|||||||
<!-- 新建图文 --> |
<!-- 新建图文 --> |
||||||
<script src="https://unpkg.com/vue-slicksort@latest/dist/vue-slicksort.min.js"></script> |
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> |
||||||
|
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script> |
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script> |
||||||
|
<!-- v-if="menuVue.menuActive == '新建图文'" --> |
||||||
<div id='article'> |
<div id='article'> |
||||||
<el-container> |
<el-container> |
||||||
<el-aside width="280px"> |
<el-aside width="280px"> |
||||||
|
<draggable v-model="myArray" :options="{draggable:'.item'}"> |
||||||
|
<div v-for="element in myArray" :key="element.id" class="item"> |
||||||
|
{{element.name}} |
||||||
|
</div> |
||||||
|
<button slot="footer" @click="addPeople">Add</button> |
||||||
|
</draggable> |
||||||
</el-aside> |
</el-aside> |
||||||
<el-main>Main</el-main> |
<el-main>Main</el-main> |
||||||
</el-container> |
</el-container> |
||||||
</div> |
</div> |
||||||
<script> |
<script> |
||||||
var articleVue = new Vue({ |
var articleVue = new Vue({ |
||||||
el: '#article' |
el: '#article', |
||||||
|
data:{ |
||||||
|
myArray:[{ |
||||||
|
name:'染发个人', |
||||||
|
id:'001100' |
||||||
|
},{ |
||||||
|
name:'个问题grew', |
||||||
|
id:'001100' |
||||||
|
},{ |
||||||
|
name:'跟他玩过任务', |
||||||
|
id:'001100' |
||||||
|
},{ |
||||||
|
name:'供热外国人', |
||||||
|
id:'001100' |
||||||
|
},{ |
||||||
|
name:'天文台认为', |
||||||
|
id:'001100' |
||||||
|
}] |
||||||
|
}, |
||||||
|
watch:{ |
||||||
|
myArray:function(n,o){ |
||||||
|
console.log('n',n); |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
addPeople:function(){ |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
}) |
}) |
||||||
</script> |
</script> |
||||||
Loading…
Reference in new issue