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

Sortable.js 介绍 https://segmentfault.com/a/1190000008209715

项目中遇到的问题：

A - 我需要在项目的拖拽组件中，使用背景

1 - 想到的第一个办法就是通过index根据列表索引添加背景

问题：拖拽是可以换动顺序的，所以不管我怎么拖动，背景的顺序并不不会变。

2 - 第二个办法是，通过动态给列表绑定ID，通过id来添加背景，这总没问题了吧

问题： 很奇怪的问题，我现在也没有理解，换动顺序以后，查看HTML元素，确实id是根据顺序变换了的，但是背景依然没变，例如我给id = a1 添加了背景a1.png，id = a2 添加了背景a2.png，但是换动顺序以后，id = a1 的背景变成了 a2.png，id = a2 的背景则变成了 a1.png，OK，这个办法遇到这种奇怪的问题，也失败了。

3 - 第三个办法，换一个思路，既然拖动对象的属性是会追随对象的，那我完全可以给元素对象添加一个imageSrc用来存储图片地址，将图片地址再赋值给元素，就没问题了

B - 项目中还需要有删除元素功能

1 - 第一个想法是直接根据id，通过remove方法移除html元素

问题： 是可以完美移除，但问题是我只是移除了html元素而已，数组对象依然存在，当我再重新拖动其他元素进来时，会将原本的结构复制出来，打印后印证确实是因为数组依然存在

2 - 第二个想法，通过数组对象查询元素内容，将当前数组唯一标识传入，然后在数组对象中移除

问题： 匹配出错，无法移除当前点击的数组

3 - 第三个想法，既然是移除我点击的当前元素，其实跟内容是无关的，我可以通过列表的索引值index来移除

验证可行，没问题，希望能够帮到遇到同样问题的人

PS：还有个问题如果你会，请指导一下，clone属性怎么使用，我从一个列表移入另一个列表，但我并不希望我原来的消除，看文档有clone属性可以使用，但是各种方法都试了还是不行

更新： 2018-6-21

这次终于实现了m2拖动到m1，并且不删除m2中的元素，并且解决了相同元素值相同的问题！哈哈，不要激动，一步步来看是怎么解决的：

1： 要实现m2中的元素拖到m1，并且m2中的元素并不会被清除，其实我有用过两个办法去解决，因为一切操作都是通过数组，所以想到的办法就是操作数组来实现，vue就是用数据操作视图这么轻松

方法一：创建一个空的数组对象，拖动开始的时候，将m2的数据doing赋值给空对象保存下来：

结束的时候再将保存下来的saveDoing赋值给doing，就可以还原m2

可以实现，但是问题来了，比如我第一次从m2中拖动b1到m1，没问题，一切正常，然后再从m2中拖动b1到m1，也没问题，这时候我要给m1中的b1添加背景图片，一添加以后，两个b1都同时添加了背景图片，很奇怪，通过添加时间戳也一样，每次时间戳都会同时改变，我仔细探索发现，应该就是我之前不明白的clone属性导致的，确实我现在还不清楚这个该怎么用，但是功能必须得实现，看来得换种方法来实现了。

方法二：创建一个空的对象，拖动开始的时候通过start（event）对象拿到event.oldIndex，通过索引在数组对象doing中拿到响应的值，赋给空的对象，再结束的时候通过索引插进去this.doing.splice(event.oldIndex, 0, doingItem)

也可以实现，但是问题也是一样的，被拖到m1的b1依然与m2的b1保持着数据上的相通，每次拖动都是相同的，得想办法拆散他们这千丝万缕的关系，然后我想到了用storage来实现。

方法二进阶版：每次拖动开始的时候，新建一个对象，对象的属性通过event.oldIndex来获取，然后存入sessionStorage，注意storage只能存储字符串，得通过JSON.stringify()转换，然后通过JSON.parse()来还原，当然此时的saveDoing也是需要的，要保证我们的m2不变：

结束时清除缓存

OK，大功告成，希望此文对你有所帮助，有什么问题可以随时联系我！