vue的移动app项目中，自定义拖拽指令的问题

使用vue的都知道vue有一个自定义指令，我比较喜欢的就是拖拽的自定义指令，感觉挺方便的！

 //组件内的拖拽指令
directives: {//组建内自定义指令drag: {// 指令的定义bind: function(el, value) {let oDiv = el; //当前元素let self = this; //上下文oDiv.ontouchstart = function(e) {//鼠标按下，计算当前元素距离可视区的距离let disX = e.touches[0].clientX - oDiv.offsetLeft;let disY = e.touches[0].clientY - oDiv.offsetTop;oDiv.style.zIndex = 3;document.ontouchmove = function(e) {//通过事件委托，计算移动的距离let l = e.touches[0].clientX - disX;let t = e.touches[0].clientY - disY;//移动当前元素//   oDiv.style.left = l + 'px';document.ontouchend = function(e) {oDiv.style.zIndex = 2;}document.ontouchmove = null;document.ontouchend = null;};};}}}
//大致的框架就是这样其中el指的是绑定的元素，value就是传的值了，

　　用法：

<div v-drag='{data:fills,info:data} '>拖拽</div>
<!--{}里面的全部都是传的参数，对应的就是上面的value-->

　　上面是拖拽指令的写法及用法，但是这并不是主要内容，当你移动端使用自定义指令的时候，如果你的公司需要兼容各种手机版本以及各种系统版本，那么可能你就需要把他撤掉，我遇到的就是苹果5s并不支持，如果用自定义的指令，那么他会闪烁，没有内容，是白屏状态，所以说，想要用自定义指令的，要考虑考使用环境！

转载于:https://www.cnblogs.com/ctb-web/p/9360578.html

vue的移动app项目中，自定义拖拽指令的问题相关推荐

基于Vue实现拖拽效果以及解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突
本人在开发中遇到实现一个基于vue的悬浮框拖动效果,经过努力研究最终实现了功能,一下是我的方法和部分代码,希望对您有所帮助,如有不对的地方还请指出.谢谢!下面步入正题: 首先展示一下功能的效果图: 要 ...
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突
功能描述: 如图,右侧悬浮菜单按钮,只支持上下方向拖动,点击时展开或关闭菜单. BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse ...
vue中实现拖拽排序
原生拖拽 API 实现拖拽设置元素 dragable 将元素的 dragable 属性设置为 true (文本图片链接的draggable 属性默认为 true)则元素可拖放 <div ...
vue中实现拖拽功能
自定义的全局指令提示:拖拽指令文章目录自定义的全局指令一.拖拽 1.自定义拖拽指令 2.页面挂载 3.css样式提示:以下是本篇文章正文内容,下面案例可供参考一.拖拽 1.自定义拖拽指令 ...
Joolun uniapp商城源码实现商城自定义拖拽装修_Java二开源码
前一阵子,Joolun uniapp商城源码系统应广大开发者的需求,把开发者们想要的商城自定义拖拽装修给安排上了,拖拽装修也在V1.0.2版本发布的时候正式上线,实现商城首页自定义动态拖拽装修(支持不 ...
vue可视化拖拽生成工具_vdesjs: 基于vue的可视化拖拽，代码生成工具。提升前端开发效率，或者集成至项目作为在线拖拽工具。（持续迭代升级中）...
vdesjs 介绍 vdesjs是一款基于vue技术栈,可视化拖拽,代码生成工具.我们提供详细的文档来帮助您理解我们工具的实现原理,并且您可以方便的基于vdesjs来扩展您自己的代码生成组件. 技术选 ...
VUE3 中实现拖拽和缩放自定义看板 vue-grid-layout
Vue Grid Layout官方文档 Vue Grid Layout中文文档 1. npm下载拖拽缩放库 npm install vue-grid-layout@3.0.0-beta1 --save ...
Vue 实现拖拽模块(二)自定义拖拽组件位置
上文介绍了拖拽添加组件的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue自定义拖拽组件位置的简单实现,具体 ...
在uni-app的app项目中使用live-pusher实现人脸识别
在uni-app的app项目中使用live-pusher实现人脸识别前言一.环境二.使用步骤三.permission.js源代码四.face.vue源代码五.代码效果总结前言在uni ...

vue的移动app项目中，自定义拖拽指令的问题

vue的移动app项目中，自定义拖拽指令的问题相关推荐

最新文章

热门文章