Javascript拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)_javascript技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Javascript拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)_javascript技巧,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2134字,纯文字阅读大概需要4分钟。
内容图文
![Javascript拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)_javascript技巧](/upload/InfoBanner/zyjiaocheng/324/8b86b85392ee46daa4f2109bc2b7002b.jpg)
附上上期的Javascript代码,方便大家查看问题。
1. 现在的这个拖拽如果我鼠标移动的快点,你会发现这个鼠标从这个div出来了,这个时候div不会跟着鼠标走了。
那为什么会出现这个问题呢?
原因其实很简单,mousemove的事件我们是给div加的,所以鼠标一旦脱离了这个div,那么这个时候mousemove已经不触发了。
解决方案: 事件加载document 上,因为你鼠标无论如何都还在页面里面,怎么样都会触发mousemove 这样移动的在快也没问题。
那么我们相应的修改下代码。
那么这个问题就可以解决了。
2. 我们看看现在还有什么问题,虽然拖的快的问题解决了,但是当我把鼠标移动到这个位置
现在可以明显看到鼠标不在div上,如果这个时候抬起鼠标,你可以看到回来之后它还会动。 这就又是一个bug!
其实这个问题和上面的是一样的。所以呢解决起来也很简单我们把mouseup也加到document上,我们来试一下看看
这样 现在如果在移动到刚才的那个位置,就不会在出现之前的bug了,并且移动的快也没有任何的问题。一切都很正常。
3. 我们看看浏览器兼容的问题
其实在低版本的火狐浏览器中有这样一个问题
。怎么出现的呢,当你第一次拖的时候是对的,在拖一次的时候按住在移动,你会发现会有个这个影子在后面。这个是怎么回事呢?
实际上来说我们现在拖动的是一个空的div火狐是有bug的,那么如果在div中加点内容呢
你会发现现在又没有问题了。
所以火狐的bug就只有在空div中出现的。
解决方案:
其实很简单,我们就只要阻止浏览器默认事件就可以了 return false; 在onmousedown中。 为什么要加在onmousedown中呢?
大家可以想一下,拖拽是从哪个事件开始的,是从onmousedown开始的吧,当鼠标按下的时候拖拽就开始了。所以要加载onmousedown中。
实际上就是加了一句return false; 把火狐的bug屏蔽掉了。
这样不管怎么拖就没有问题了。
附上代码:
现在程序是完整了,但是在用户体验上还有一些问题。
比如说用户可能会把这个div拖出浏览器外面,那怎么解决呢?
那我们就在加个判断呗。 这个很简单吧,如果从左边出去了
,那就直接等于0,他就从左边出不去了。那么上边也是一样的。
那么怎么防止不能从右边出去?? 画个图就清楚了。 其实我们只要把页面的可视取的宽度减掉div的宽度就能算出来了。
那这个就是所谓的最大值,判断一下如果移动的距离超过了这个最大值就等于这个最大值即可。那么下边是一样的。
附上完整代码:
那么现在这个拖拽就比较完整啦。O(∩_∩)O
内容总结
以上是互联网集市为您收集整理的Javascript拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)_javascript技巧全部内容,希望文章能够帮你解决Javascript拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。