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

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

han32684年前 (2021-05-18)VUE3715

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 用webpack 打包的时候添加版本号, VUE 项目更新部署时,浏览器页面缓存问题

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

element中el-switch开关点击弹出确认框 阻止默认的el-switch 的点击事件 发送请求成功后才改变状态

element中el-switch开关点击弹出确认框 阻止默认的el-switch 的点击事件 发送请求成功后才改变状态

Switch 开关表示两种相互对立的状态间的切换,多用于触发「开/关」。常见用法: 1、绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactiv...

vue中实现点击按钮滚动到页面对应位置 使用css3平滑属性实现

vue中实现点击按钮滚动到页面对应位置 使用css3平滑属性实现

vue项目中,需要实现点击对应按钮,滚动到对应页面位置,下面分享一个简单实用的方法<template>   <div class="box&...

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

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

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

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

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