vue2.0使用Sortable.js实现的拖拽功能示例

前端之家收集整理的这篇文章主要介绍了vue2.0使用Sortable.js实现的拖拽功能示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

简介

在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组。但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码

该案例主要是在用于vuejs2.0中实现的拖拽功能,用到的的js有Sortable.js,vuedraggable.js,当然还有vue.min.js,提供的案例使用的require.js加载。

实现效果

实现后的效果如图所示:

html主要代码

css代码

js代码

} }

})

})

里面的可配置的很多细节请参考参考地址,这里不做详细介绍。

可下载案例地址:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章