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 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.

使用  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[0])
})

 

on('drop')當拖入放下模塊的時候
事件列表在https://github.com/bevacqua/dragula#drakeon-events 查看
有 cancel 取消/drag 拖拽/remove 移走