vue实现拖拽元素；vuedraggable拖拽插件

效果图：

中文文档

以下代码可直接复制使用

安装依赖

npm i -S vuedraggable

使用

<template><div class="container"><div>使用flex竖轴布局 <br>handle=".mover" 可拖拽的class类名 <br>filter=".forbid" 不可拖拽的class类名</div><vuedraggable handle=".mover" filter=".forbid" class="container"style="width: 700px; height: 600px; display: flex; flex-wrap: wrap;" v-model="list"><transition-group><div v-for="(item, index) in list" :key="index" class="item":style="{ width: '200px', height: item.height + 'px' }"><span class="mover" style="background-color: #1fff;padding: 0 5px;cursor: move;">+</span><div class="mover"><div style="background-color: #1fff;">点击可拖</div><div style="background-color: #fff000;" class="forbid">点击不可拖</div></div><p>{{ item.text }}</p></div></transition-group></vuedraggable></div>
</template><script>
import vuedraggable from "vuedraggable";
export default {components: { vuedraggable },props: {},data() {return {list: [{ text: 'Item 1', height: 200 },{ text: 'Item 2', height: 150 },{ text: 'Item 3', height: 200 },{ text: 'Item 4', height: 150 },{ text: 'Item 5', height: 250 },{ text: 'Item 6', height: 350 }],};},
}
</script><style>
.container {border: 1px solid #ddd;
}.container>span {height: inherit;display: flex;flex-direction: column;flex-wrap: wrap;
}.item {width: 200px;margin: 5px;border: 1px solid black;
}
</style>