vue拖拽插件，可拖放排序

最新推荐文章于 2024-06-13 10:31:02 发布

@橙子气泡

最新推荐文章于 2024-06-13 10:31:02 发布

阅读量2.5k

点赞数

文章标签： Vue vuedraggable 拖拽排序组件列表

本文链接：https://blog.csdn.net/m0_61044611/article/details/124382552

版权

1、安装依赖插件

npm i -S vuedraggable

2、使用组件

在需要的页面写入

html

    <draggable v-model="myArray" class="drag">
      <transition-group>
        <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
      </transition-group>
    </draggable>

import draggable from "vuedraggable";
export default {
    components: { draggable },
    data() {
      myArray: [
        { name: 1234567890, id: 1 },
        { name: 23467890, id: 2 },
        { name: 1234589, id: 3 },
        { name: 123678, id: 4 },
        { name: 134567890, id: 5 },
        { name: 1234567890, id: 6 },
        { name: 23467890, id: 7 },
        { name: 1234589, id: 8 },
        { name: 123678, id: 9 },
        { name: 134567890, id: 10 }
      ]
    };
}

css

.drag {
  width: 300px;
  height: 500px;
  overflow: hidden;
  background: #42b983;
}
.drag div {
  font-size: 20px;
  padding: 20px;
  margin: 2px;
  border: 2px dashed red;
}