h5、vue实现拖拽

H5中拖拽属性：
draggable： auto | true | false

拖动事件：

  • dragstart 在元素开始被拖动时触发
  • dragend 在拖动操作完成时触发
  • drag 在元素被拖动时触发
    释放区事件：

dragenter 被拖动元素进入到释放区所占据得屏幕空间时触发
dragover 当被拖动元素在释放区内移动时触发
dragleave 当被拖动元素没有放下就离开释放区时触发
drop 当被拖动元素在释放区里放下时触发
案例： 实现div拖拽到指定区域效果：

效果：
h5实现效果图
在vue中使用推荐一个好用的插件——vue-draggable

效果图：

vue-draggable效果图

官网(可以在线测试)：http://www.itxst.com/vue-draggable

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容