vue 实现文本的拖拽_Vue.Draggable实现拖拽效果(采坑小记)

之前有写过Vue.Draggable实现拖拽效果(快速使用)(http://www.cnblogs.com/songdongdong/p/6928945.html)最近项目中要用到这个拖拽的效果,当产品那个今日头条app编辑导航,拖拽的效果时,心里暗爽,(之前玩过呀,很简单的,事实证明,任何看似简单的东西,实现起来都不会那么一帆风顺,当然:当你真正实现了该效果时,会发现其实还是挺简单的:ps:自说自话,自己打自己脸\(^o^)/~),闲话少说,直接切入正题:

仔细观察发现,今日头条导航部分编辑效果,有以下几个效果

1:点击编辑开启可以编辑的效果(也就是是否开启拖拽)

2:拖拽前选中效果

3:拖动过程中元素移动到目标位置的运动效果

这是Vue.Draggable作者的git地址:https://github.com/SortableJS/Vue.Draggable,至于怎么引入到你的vue项目,请参考之前的这篇博客(http://www.cnblogs.com/songdongdong/p/6928945.html)引入之后我们发现Vue.Draggable默认就是开启拖拽状态的,那我们要控制这个状态怎么办呢?在作者项目的首页,发现并没有详细介绍,是不是有这个状态提供,当然也许是因为自己英语太渣,没有发现这句话(See here for reference),后来发现,点进去,发现了很多好玩的东西,具体有哪些,请移步看这里(https://github.com/RubaXa/Sortable#event-object-demo)这

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值