vue拖动布局
vue拖动布局
如何使用 安装 npm install vue-drag-layout --save-dep
引入
import Vue from 'vue';
import DragToLayout from "vue-drag-layout";
// autoSwap: 当拖拽元素移动至目标位置时 是否自动交替位置
// 默认false
Vue.use(DragToLayout, { autoSwap: false });
示例
<template>
<ul>
<li
v-for="(item, index) in list"
:key="index"
:item="item"
v-dragToLayout="{
group: 'example',
list: list,
item: item,
// 可选，设置拖拽元素的可拖拽部分
className: "drag-ele-class"
}"
></li>
</ul>
</template>
<script>
export default {
data() {
return {
list: [
{
id: '1',
name: 'item1',
},
{
id: '2',
name: 'item2'
}
]
};
},
mounted() {
const vm = this;
vm.$dragging.$on('dragged', ($event) => {
const {
dragged, // 拖拽完成的item
to, // 拖拽被替换的item
group, // 拖拽分组名
} = $event;
...
});
},
};
</script>
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
