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

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

han32684年前 (2021-05-18)VUE4009

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中实现点击按钮滚动到页面对应位置 使用css3平滑属性实现

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

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

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

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

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

简单理解Vue中的nextTick

简单理解Vue中的nextTick

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

VUE computed和watch的区别最简化

VUE computed和watch的区别最简化

<!DOCTYPE html> <html lang="en"> <head>    &...

基于Vue的移动端图片裁剪组件(Clipic)可自动压缩

基于Vue的移动端图片裁剪组件(Clipic)可自动压缩

安装:Bashnpm install --save clipic使用代码:Markup<template>     ...