安装

$ npm install awe-dnd --save

应用 

在main.js中,通过Vue.use导入插件
import VueDND from 'awe-dnd' Vue.use(VueDND)

vue文件中引用

<script>
export default {
data () {
return {
colors: [{
text: "Aquamarine"
}, {
text: "Hotpink"
}, {
text: "Gold"
}, {
text: "Crimson"
}, {
text: "Blueviolet"
}, {
text: "Lightblue"
}, {
text: "Cornflowerblue"
}, {
text: "Skyblue"
}, {
text: "Burlywood"
}]
}
}
}
</script>
<template>
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
:key="color.text"
>{{color.text}}</div>
</div>
</template> 

vue2.0的使用

<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
:key="color.text"
>{{color.text}}</div>
</div>

vue1.0的使用

<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', key: color.text }"
track-by="text"
>{{color.text}}</div>
</div>
添加事件
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', otherData: otherData }"
:key="color.text"
>{{color.text}}</div>
</div> export default {
mounted () {
this.$dragging.$on('dragged', ({ value }) => {
console.log(value.item)
console.log(value.list)
console.log(value.otherData)
})
this.$dragging.$on('dragend', () => { })
}
}

  

vue列表拖拽组件 vue-dragging的更多相关文章

  1. Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示

    本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...

  2. vue列表拖拽排序功能实现

    1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...

  3. vue实现拖拽组件

    可以拖拽,靠边停靠,效果图如下 代码如下: 注意:代码中使用的图片未上传 DragAndDrop组件: <template> <div class="drag" ...

  4. Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题

    Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...

  5. vue拖拽组件开发

    vue拖拽组件开发 创建临时vue项目 先查看node和npm版本,怎么安装就不多多bb了 再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安 ...

  6. vue自由拖拽、缩放组件

    github地址:https://github.com/kirillmurashov/vue-drag-resize 安装: npm i -s vue-drag-resize 使用: <temp ...

  7. vue实现拖拽排序

    基于vue实现列表拖拽排序的效果 在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果:这里提供一种简单的实现方案. 此例子基于vuecli3 首先,我们先了解一下js原生拖动事件: 在拖动目标 ...

  8. Vue实现拖拽穿梭框功能四种方式

    一.使用原生js实现拖拽 点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8 ...

  9. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

  1. min_25筛题目总结

    看了网上众多博客后,我才发现,实现min_25只有脑子,没有代码. 当然可能是我太ruo了. min_25是一种想法,不是算法. 不要尝试套模板,因为很多题目并没有什么用. 最重要的一点,g不要看成是 ...

  2. Vue的自定义组件之间的数据传递

    一,父级传向子级 1,在子级的属性中添加props:['myname',......],参数可以传多个,看具体而定: 2,在父级data中定义好需要传递的变量数据,例如name:"rose& ...

  3. windows版influxDB安装与配置

    一.下载链接https://portal.influxdata.com/downloads,选windows版 二.解压到安装盘,目录如下 三.修改conf文件,代码如下,直接复制粘贴(1.4.2版本 ...

  4. POJO、JavaBean、DTO的区别

    一.POJO(Plain Ordinary Java Object)简单的Java对象,其中有一些属性及其getter setter方法的类,没有业务逻辑(重点理解一下"没有业务逻辑&quo ...

  5. java 方法的重载

    方法的重载:一个类中允许出现一个以上的同名方法,必须保证同名方法的参数列表不同    好处:方便阅读,优化程序设计    重载规则:重载方法名相同,但每个重载方法都必须有一个独一无二的参数类型列表,方 ...

  6. python3读取MySQL-Front的MYSQL密码

    python3读取MySQL-Front的MYSQL密码 python3 mysql 密码 MySQL-Front 前言 同样的套路又来了,继续尝试从配置文件中读取敏感的信息,这次轮到的是MySQL- ...

  7. golang对不同系统的编译

    Golang 支持在一个平台下生成另一个平台可执行程序的交叉编译功能. Mac下编译 # mac编译linux执行文件 CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go ...

  8. Visual Studio项目属性的生产平台,如何改为X64?

    如图,我把平台改为x64,可是按打叉,退出后,再进入项目属性,还是 x86,没变. 解决方法: 选择 Setup1项目, 选择"属性" ->选择 "配置管理器&qu ...

  9. wpf binging Class 双向绑定 需要实现的接口

    public class HuMan : INotifyPropertyChanged { private string name; private string age; private strin ...

  10. 我的自定义框架 || 基于Spring Boot || 第一步

    今天在园子里面看到一位大神写的springboot做的框架,感觉挺不错,遂想起来自己还没有一个属于自己的框架,决定先将大神做好的拿过来,然后加入自己觉得需要的模块,不断完善 目前直接复制粘贴过来的,后 ...