| vue | 您所在的位置：网站首页 › vuedraggable示例 › vue |
vue
我的图书馆
查看信箱
系统消息
官方通知
设置
开始对话
有11人和你对话，查看 忽略
历史对话记录
通知设置
留言交流
请选择搜索范围 含 的文章 含 的书籍 含 的随笔小世界的野孩子 / 待分类 / vue-draggable配置从入门到精通 转Word 全屏 打印 修改 转藏+1 分享 QQ空间 QQ好友 新浪微博 微信扫一扫 × 00:00选择朗读音色 亲切女声 稳重女声 成熟男声 选择朗读倍速 0.75倍 1倍 1.5倍 选择循环方式 单篇循环 
vue-draggable配置从入门到精通
2020-02-20
小世界的...
展开全文
我们讲一下vue的基础用法，在掌握了基础用法以后，我们就会融汇变通，实现比较难的需求。 安装cnpm i vuedraggable -S使用使用很简单，在需要使用拖拽的界面引入，组件中注册，就可以使用了。 import draggable from 'vuedraggable' ... export default{ components:{ draggable, }, ... 属性 group: { name: "...", pull: [true, false, clone], tag: 'td' // 默认div，设置draggable标签解析html标签 v-model：data // 绑定数据列表 put: [true, false, array] } //name相同的组可以互相拖动, pull可以写条件判断，是否允许拖走，put可以写条件判断，是否允许拖入 sort: true, // 内部拖动排序列表 delay: 0, // 以毫秒为单位定义排序何时开始。 touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素? disabled: false, // 如果设置为真，则禁用sortable。 animation: 150, // ms, 动画速度运动项目排序时，' 0 ' -没有动画。 handle: ".my-handle", // 在列表项中拖动句柄选择器，设置某些地方拖动才有效。 filter: ".ignore-elements", // 不能拖拽的选择器(字符串 class) preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter” draggable: ".item", // 指定元素中的哪些项应该是可拖动的class。 ghostClass: "sortable-ghost", // 设置拖动元素的class的占位符的类名。 chosenClass: "sortable-chosen", // 设置被选中的元素的class dragClass: "sortable-drag", //拖动元素的class。 forceFallback: false, // 忽略HTML5的DnD行为，并强制退出。（h5里有个属性也是拖动，这里是为了去掉H5拖动对这个的影响） fallbackClass: "sortable-fallback", // 使用forceFallback时克隆的DOM元素的类名。 fallbackOnBody: false, // 将克隆的DOM元素添加到文档的主体中。（默认放在被拖动元素的同级） fallbackTolerance: 0, // 用像素指定鼠标在被视为拖拽之前应该移动的距离。 scroll: true, // or HTMLElement scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, scrollSensitivity: 30, // px scrollSpeed: 10, // px事件start,add,remove,update,end,choose,unchoose,sort,filter,clone start (evt) {} // 刚开始拖动时候触发 add (evt) {} // 拖拽新增的时候触发 remove (evt) {} // 从列表拖走，移除触发 update (evt) {} // 列表更新触发 end (evt) {} // 和start对应，拖拽完了触发 choose(evt) {} // 选择拖拽元素触发 sort (evt) {} // 排序触发 change (evt) {} // 这个很重要，如果数据不是整个提交，单个提交数据的时候就会用到它 evt.added.element / evt.removed.element如果这个列表添加元素就会added的数据，如果删除元素就是removed的元素，还会获取到移动和删除的所在位置index :move (evt, dragevt) {} // 这个也很重要，在两个列表相互拖拽的时候，有时候需要更新ui，在接口还没有更新之前，所以就会用到move，他是把元素从一个列表拖到另一个列表的瞬间触发，这时候可以给原来的位置设置元素样式等等。
共11人赞赏
本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
转藏到我的图书馆
献花（0）
+1
来自： 小世界的野孩子 > 《待分类》 举报推一荐：发原创得奖金，“原创奖励计划”来了！
猜你喜欢 0条评论 发表 请遵守用户 评论公约 查看更多评论
类似文章
更多
在vue中使用样式的方法 1. 数组 ¥.00 微信或支付宝扫码支付： 开通即同意《个图VIP服务协议》 正在支付中，请勿关闭二维码！ 微信支付后，该微信自动注册为你的个人图书馆账号 付费成功，还是不能使用？ 复制成功！ 绑定帐号，享受特权 恭喜你成为个图VIP！ 在打印前，点击“下一步”观看2个提示 下一步 全部>> ● 电子书免费读 ● 全站无广告 ● 全屏阅读 ● 高品质朗读 ● 批量上传文档 ● 购书5折 ● 5千个文件夹 ● 专属客服微信支付查找“商户单号”方法： 1.打开微信app，点击消息列表中和“微信支付”的对话 2.找到扫码支付给360doc个人图书馆的账单，点击“查看账单详情” 3.在“账单详情”页，找到“商户单号” 4.将“商户单号”填入下方输入框，点击“恢复VIP特权”，等待系统校验完成即可。 支付宝查找“商户订单号”方法： 1.打开支付宝app，点击“我的”-“账单” 2.找到扫码支付给个人图书馆的账单，点击进入“账单详情”页 3.在“账单详情”页，找到“商家订单号” 4.将“商家订单号”填入下方输入框，点击“恢复VIP特权”，等待系统校验完成即可。 已经开通VIP，还是不能打印？ 请通过以下步骤，尝试恢复VIP特权 第1步在下方输入你支付的微信“商户单号”或支付宝“商家订单号” 第2步点击“恢复VIP特权”，等待系统校验完成即可 如何查找商户单号？ 恢复VIP特权正在查询... 订单号过期！ 该订单于2020/09/09 23:59:59支付，VIP有效期：2020/09/09 23:59:59至2020/09/11 23:59:59！如需使用VIP功能，建议重新开通VIP 返回上一页支付成功！ 确定已获得“发送到手机”权限！ 微信扫码，在手机上查看选中内容 全部>> ● 电子书免费读 ● 全站无广告 ● 全屏阅读 ● 高品质朗读 ● 批量上传文档 ● 购书5折 ● 5千个文件夹 ● 专属客服确定复制刚才选中的内容？ 确定 复制 打印文章 发送到手机微信扫码，在手机上查看选中内容 全屏阅读 朗读全文 分享文章 QQ空间 QQ好友 新浪微博 微信扫一扫 复制 打印文章 发送到手机微信扫码，在手机上查看选中内容 全屏阅读 朗读全文 × ×复制成功！ ¥.00 微信或支付宝扫码支付： 开通即同意《个图VIP服务协议》 正在支付中，请勿关闭二维码！ 自动续费¥12/月，可随时取消 开通即同意《连续订阅服务协议》|《个图VIP服务协议》 全部>> ● 电子书免费读 ● 全站无广告 ● 全屏阅读 ● 高品质朗读 ● 批量上传文档 ● 购书5折 ● 5千个文件夹 ● 专属客服 ×支付确认 1. 请在手机上打开的页面进行支付； 2. 如支付完成，请点击“支付完成”。 支付完成 取消支付 |
以上是实现项目结果，难点在于二级的拖动不会影响三级，就是二级领导可以随便换，三级员工保持不变，一二三级可以随便拖拽，还有一些新建和条件弹窗等功能。vue-draggable是数据驱动的，实现以上效果，而且布局要随之变化，确实花费了一些功夫。
好了基础知道到此为止，多看看官方文档。https://github.com/SortableJS/Vue.Draggable未完待续（分析项目难点以及实现过程，源代码）...
【本文地址】