vue Draggable实现拖动改变顺序
Vue.Draggable
SortableJS/Vue.Draggable: Vue.Draggable 是 Sortable.js 的 Vue.js 封装组件,提供了拖放排序功能,可以在 Vue 应用中轻松实现列表元素的可拖拽重排。
项目地址:https://gitcode.com/gh_mirrors/vu/Vue.Draggable
免费下载资源
·
-
npm install vuedraggable
-
import draggable from 'vuedraggable'
-
示例代码
Test.vue
<template>
<ul class="sort-ul">
<div>45454</div>
<draggable group="article" :value="sortArr" @input="handleListChange($event)">
<li v-for="(item,index) in sortArr" :key="index">
<h2>{{item.title}}</h2>
</li>
</draggable>
</ul>
</template>
<script>
import Draggable from 'vuedraggable';
export default {
name: 'Test',
props:{
},
data () {
return {
fileList: [],
sortArr:[
{title:"00"},
{title:"01"},
{title:"02"},
{title:"03"},
{title:"04"},
{title:"05"},
{title:"06"},
{title:"07"},
{title:"08"},
{title:"09"},
],
}
},
components: {
Draggable,
},
methods: {
// 更新位置
handleListChange(event){
console.log(event);
this.sortArr = event;
}
},
mounted () {
}
}
</script>
<style>
ul{
padding: 0;
width: 400px;
}
li{
width: 100px;
float:left;
}
</style>
main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
app.vue
<template>
<div id="app">
<Test />
</div>
</template>
<script>
import Test from '@/components/Test.vue'
export default {
name: 'App',
components:{
Test,
},
methods: {
}
}
</script>
GitHub 加速计划 / vu / Vue.Draggable
4
1
下载
SortableJS/Vue.Draggable: Vue.Draggable 是 Sortable.js 的 Vue.js 封装组件,提供了拖放排序功能,可以在 Vue 应用中轻松实现列表元素的可拖拽重排。
最近提交(Master分支:4 个月前 )
431db153 - 2 年前
017ab498 - 3 年前
更多推荐
已为社区贡献2条内容
所有评论(0)