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>
SortableJS/Vue.Draggable: Vue.Draggable 是 Sortable.js 的 Vue.js 封装组件,提供了拖放排序功能,可以在 Vue 应用中轻松实现列表元素的可拖拽重排。
最近提交(Master分支:16 天前 )
431db153 - 3 年前
017ab498 - 4 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐

所有评论(0)