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

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

han32685年前 (2021-05-18)VUE4064

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-cli3.x不同环境打包运行不同api接口及打包后动态配置API地址

vue-cli3.x不同环境打包运行不同api接口及打包后动态配置API地址

今天接到一个测试反馈说“我能不能我直接打包测试环境项目不用手动去改API”我第一反应就是这个测试这么懒!改个API都嫌麻烦,但是仔细一想毕竟"懒惰使人进步"嘛! &nbs...

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

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

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

vue 用webpack 打包的时候添加版本号, VUE 项目更新部署时,浏览器页面缓存问题

因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。module.exports = {  ...

vue 弹框使用this.$emit调用父组件方法及传参 无效 (已解决) this.$parent

// 在子组件中调用父组件的method1方法 this.$parent.method1() // 获取父组件属性值 this.$parent.prop...

基于Vue的移动端图片裁剪组件(vue-imgcut)

基于Vue的移动端图片裁剪组件(vue-imgcut)

安装:npm install vue-imgcut –save使用代码:<template>     <div...