vue2-dragula vue拖拽组件
https://github.com/kristianmandrup/vue2-dragula git 地址
https://github.com/kristianmandrup/vue2-dragula-demo/ 安装 并在vue里面使用的详细说明
Drag and drop so simple it hurts
Vue wrapper for dragula drag'n drop library, based on vue-dragula by @Astray-git.
vue 为 dragula 拖拽 包装 减少 代码,基于 vue-dragula。
This library has been refactored, upgraded and extended with powerful new features for use with Vue 2.
代码已经被重构了,为vue 2 升级并且延申了有用的新特性
Call for help: copy error 寻求帮助: 拷贝的错误
This library has a long standing issue with the copy
operation, resulting in items being inserted twice in the target container.
这个代码有一个长时间存在的问题在拷贝操作上面,导致目标容器里面会把item插入2次。
I have tried to debug it thoroughly but with no success so far. I suspect it has to do with the Vue2 override of Array splice
method, used in the ModelManager
and the correct use of the Vue update queue.
我非常努力的debug修复它,但是目前为止没有成功,我猜测它和Vue2的数组重写 拆分方法有关系,放在在modelManger并且正确的使用了Vue的更新队列。
You can try the ImmutableModelManager
and see if that works better as it will return a new immutable array with a new pointer on each change.
你可以尝试 ImmutableModelManager
并且查看 是否可以更好的工作因为它将返回一共新的不可变的数组在 每次更新的时候。
$set for modifying objects in array for reactivity
Vue.set(this.model, changedModel)
Here a JSFiddle to play with
这里是JSFiddle 运行的地方
Please help fix this bug!
请帮助修复这个bug
You can also try a simple array example in a Vue component, with buttons and handlers to simulate each of the effects (on underlying array model) for the drag effects:
你也可以尝试一共简单的数组 例子在Vue 组件中,通过按钮和操作来模拟 每一种拖拽的效果
copy
move
To better help track and fix the problem with the way Vue updates arrays.
为了更好的帮助跟踪和解决 Vue 更新数组的方式的 问题
insertAt(index, insertModel) {
const splicedModel = this.model.splice(index, , insertModel)
const modelAfterInsert = this.model
return splicedModel
}
Currently the splicedModel
returns an empty array []
and modelAfterInsert
the same (unmodified) array as before the splice
. Yet, copy
(or Vue?) still ends up inserting the item twice in the UI
目前 拆分模块返回一个空的数组[] 并且 modelAfterInsert 相同的数组作为之前的拆分。
Copy: ensure clone 拷贝: 确认拷贝 的bug
When making a copy error we need to ensure we are not reusing the same reference in the two container models. We need to clone the value first.
So we should be handling this correctly!?
所以我们确定能正确的解决它么!?
上面就是一些bug 没解决的,下面看下API
API
You can access the global app service via Vue.$dragula.$service
or from within a component via this.$dragula.$service
(recommended for most scenarios).
你可以获取全局的app 服务 通过 Vue.$dragula.$service
或者在组件里面通过 this.$dragula.$service(推荐使用).
You can also create named services for more fine grained control.
你也可以创建命名的服务为更多的细节控制
Service configuration 服务配置
Set dragula options 设置 dragula 的配置项
Use service.options(name, options)
to configure service options
使用 service.options(name, options) 来配置服务配置项
(注册拖拽事件的写法)
// ...
new Vue({
// ...
created () {
const service = Vue.$dragula.$service
service.options('my-drake', {
direction: 'vertical',
})
}
})
find drake by name
Use service.find(name)
to return a named drake
instance registered with the service.
使用 service.find(name)
来返回一个命名为 drake 被服务所注册的实例。或者这样写
Vue.vueDragula.options('second-bag', {
copy: true, //拷贝,
containers,
moves,
accepts,
copySortSource
});
属性在 https://github.com/bevacqua/dragula#optionscontainers 所有options.*** 都是可以被放置在{ }里面的属性
Event handlers via event bus 事件处理通过 事件公交车
See drake events
Use service.eventBus.$on
to define drake event handlers //通过 eventBus.$on注册事件
service.eventBus.$on('drop', (args) => {
console.log('drop: ' + args[])
})
on('drop')当拖入放下模块的时候
事件列表在https://github.com/bevacqua/dragula#drakeon-events 查看
有 cancel 取消/drag 拖拽/remove 移走
vue2-dragula vue拖拽组件的更多相关文章
- vue拖拽组件开发
vue拖拽组件开发 创建临时vue项目 先查看node和npm版本,怎么安装就不多多bb了 再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安 ...
- Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题
Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...
- Vue拖拽组件
vue开发公众号项目,***产品需要添加一个新的功能.拖拽功能.一听简单.百度上轮子挺多,直接拉一个过来用着就行.然鹅...兴奋之余,却失望至极.东西很多,没有一个能使得.你让我失望,那我就让你绝望. ...
- Vue 拖拽组件 vuedraggable 和 vue-dragging
一.描述 之前用 vue 写过一个在线的多二维码生成服务,体验地址:https://postbird.gitee.io/vue-online-qrcode/ 后面发现二维码多了之后有时候想要排序,需要 ...
- Vue拖拽组件列表实现动态页面配置
需求描述 最近在做一个后台系统,有一个功能产品需求是页面分为左右两部分,通过右边的组件列表来动态配置左边的页面视图,并且左边由组件拼装起来的视图,可以实现上下拖拽改变顺序,也可以删除. 根据这个需求我 ...
- Vue 拖拽组件 vuedraggable 和 awe-dnd
vuedraggable:https://www.npmjs.com/package/vuedraggable awe-dnd:https://www.npmjs.com/package/awe-dn ...
- Vue 拖拽组件 vuedraggable 、 vue-dragging 、awe-dnd
参考链接:http://www.ptbird.cn/vue-draggable-dragging.html vue-draggable 学习和使用:https://www.jianshu.com/p/ ...
- Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示
本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...
- vue-slicksort拖拽组件
vue-slicksort拖拽组件 安装 通过npm安装 $ npm install vue-slicksort --save 通过yarn安装 $ yarn add vue-slicksort 插件 ...
随机推荐
- LeetCode 445. Add Two Numbers II(链表求和)
题意:两个非空链表求和,这两个链表所表示的数字没有前导零,要求不能修改原链表,如反转链表. 分析:用stack分别存两个链表的数字,然后从低位开始边求和边重新构造链表. Input: (7 -> ...
- LeetCode 141. Linked List Cycle(判断链表是否有环)
题意:判断链表是否有环. 分析:快慢指针. /** * Definition for singly-linked list. * struct ListNode { * int val; * List ...
- mysql mvcc 的理解
mvcc 全称 multiple version concurrency control 多版本并发控制,是数据库领域比较常用的一种非锁并发技术. mysql 的innodb中,在RR.RC级别会使用 ...
- 为什么很多 Android 程序喜欢在存储卡根目录建文件夹来存储数据而不是 Android/data 目录下?
知乎回答. http://www.zhihu.com/question/19866689 pansz,欢迎评论 知乎用户.弓长.知乎用户 赞同 这个道理很简单:因为没人管啊.你乱存放文件,在a ...
- [HNOI 2017]大佬
Description 题库链接 题意简述来自Gypsophila. 你现在要怼 \(m\) 个大佬,第 \(i\) 个大佬的自信值是 \(C_i\) .每次怼大佬之前,你的自信值是 \(mc\),等 ...
- python随机函数.2020.2.26
随机生成函数: import random //首先要引用random模板 print(random.randint(0,9)) //random的语法 random.randint(0,9 ...
- 1. 使用 Docker 安装 Kong
Create a Docker network $ docker network create kong-net Start Database $ docker run -d --name kong- ...
- Eclipse配置maven和新建maven工程
1 安装配置Maven 1.1 下载Maven 从Apache网站 http://maven.apache.org/ 下载并且解压缩安装Apache Maven. Maven下载地址: http:/ ...
- web页面的JS部分乱码了!!
在引用的地方给出编码即可 <script type='text/javascript' src='/zbjc/resources/normal/index_page.js' charset=&q ...
- JDBC--调用函数&存错过程
1.通过Connection对象的prepareCall()方法创建CallableStatement对象的实例,在使用prepareCall()方法时需传入一个String类型的字符串,该字符串用于 ...