Vue.Draggable使用体验
前段时间公司提一个需求:就是在后台管理页增加banner管理列表,通过拖动列表改变banner顺序。 之前没有遇到过这样的需求,我就在网上找到了Vue.Draggable。感觉效果还不错,这里就写一下使用的心得体会。
首先附上:github地址:https://github.com/SortableJS/Vue.Draggable
github上面的文档都是英文的看不懂,于是找了csdn的这篇中文文档:https://blog.csdn.net/zjiang1994/article/details/79809687
我们的需求是通过拖动给banner排序,那么就必须在拖动完了以后把新的的列表顺序发送给后台。
Vue.Draggable有一个onUpdate方法:排序之后的回调函数,很好这就是我们需要的。就在draggable的模块写 :onUpdate="sortChange()" (sortChange是上传后台的方法),成功拿到了改变之后的数据也提交到了后台。但是却发现了一个比较严重的问题,就是页面有任何操作的时候都会触发该方,这就很无语了。我又把这些方法都试了一遍,结果都一样。
- onStart: 开始拖动时的回调函数
- onEnd: 拖动结束时的回调函数
- onAdd: 添加单元时的回调函数
于是我又在网上搜解决方法,看到别是都是用的@来替换:on,然后我就也把:on换成@符,之后再试就不能触发事件了。然后又看到有人用的change而不是Update,然后又把Update改成change。再试一下,很完美,再也不随随便触发事件了