当前位置:首页 > 经验笔记 > VUE > 正文内容

VUE拖放排序,好用的vue拖拽插件vuedraggable拖放排序

han32684年前 (2021-05-18)VUE3820

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>

js:

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;
}

演示图片:

image.png

参考: https://github.com/SortableJS/Vue.Draggable

来源:CSDN

扫描二维码推送至手机访问。

版权声明:本文由瀚文博客发布,如需转载请注明出处。

本文链接:https://hanwenblog.com/post/57.html

分享给朋友:

相关文章

vue element table expand 设置只可以展开一行、设置点击行即可打开扩展内容

在Vue中使用Element UI的el-table组件时,‌可以通过以下步骤设置只可以展开一行以及通过点击行即可打开扩展内容:‌设置只可以展开一行:‌通过监听expand-change事件来实现每次...

ElementUI的el-cascader级联选择器组件获取选中的label | VUE

ElementUI的el-cascader级联选择器组件获取选中的label | VUE

例如上图,需要拿到全部/设备:设备123<el-cascader   ref="myCascader"   :options=&q...

elementUI Cascader组件在for循环中无法使用getCheckedNodes这个方法

elementUI Cascader组件在for循环中无法使用getCheckedNodes这个方法

上一篇文章说了elementUI组件获取label的值,把Cascader选择器放在for循环中问题又来了用getCheckedNodes报错没有这个方法我就试探性的看看他的上级有没有存储 ...

简单理解Vue中的nextTick

简单理解Vue中的nextTick

官方文档:Vue 在更新 DOM 时是异步执行的,为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM...

在vue中实现element-ui的el-dialog弹框拖拽

1.在assets/js/文件夹下新建directives.js 文件:import Vue from 'vue' // v-dialog...