- 文档：https://sortablejs.github.io/Sortable/
- github：https://github.com/SortableJS/Sortable
- Vue2: https://github.com/SortableJS/Vue.Draggable
- Vue3: https://github.com/SortableJS/vue.draggable.next
- npm https://www.npmjs.com/package/vuedraggable
# vue2
npm install vuedraggable --save
# vue3
npm install vuedraggable@next --save
Vue3示例
实现效果
文章来源：https://www.toymoban.com/news/detail-740055.html
实现代码文章来源地址https://www.toymoban.com/news/detail-740055.html
<template>
<draggable
v-model="myArray"
item-key="id"
>
<template #item="{ element }">
<div class="draggable__item">{{ element.name }}</div>
</template>
</draggable>
</template>
<script>
// created at 2023-11-01
import draggable from 'vuedraggable'
export default {
components: {
draggable,
},
data() {
return {
myArray: [
{ name: '苹果' },
{ name: '香蕉' },
{ name: '桔子' },
{ name: '草莓' },
],
}
},
}
</script>
<style lang="less">
.draggable__item {
background-color: green;
color: #fff;
line-height: 30px;
width: 200px;
text-align: center;
margin-bottom: 10px;
cursor: move;
}
</style>
到了这里，关于SortableJS：vuedraggable实现元素拖放排序的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
