vue2-dragula vue拖拽组件

Posted 2021-03-23 chenyi4

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 splicemethod, 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, 0, 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.