社区
JavaScript
帖子详情
div的mousedown、mousemove和mouseup事件问题
Waitforsniping
2013-01-07 10:00:33
现在网页上有一个div,我想实现的功能是:当鼠标在div上按下之后(不松开)然后拖动,这个时候div开始动态输出鼠标的坐标,然后当鼠标松开的时候,鼠标的坐标不会再改变。
这样依次使用了mousedown、mousemove和mouseup事件。
我遇到的问题是当鼠标松开之后,坐标依然还在变,我想加个判断,但是这个判断怎么加不会,有人能帮忙解决下不?总之能实现这个功能就行,最好用jquery。
...全文
586
2
打赏
收藏
div的mousedown、mousemove和mouseup事件问题
现在网页上有一个div,我想实现的功能是:当鼠标在div上按下之后(不松开)然后拖动,这个时候div开始动态输出鼠标的坐标,然后当鼠标松开的时候,鼠标的坐标不会再改变。 这样依次使用了mousedown、mousemove和mouseup事件。 我遇到的问题是当鼠标松开之后,坐标依然还在变,我想加个判断,但是这个判断怎么加不会,有人能帮忙解决下不?总之能实现这个功能就行,最好用jquery。
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
2 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
Waitforsniping
2013-01-07
打赏
举报
回复
引用 1 楼 hujife 的回复:
可以在mouseup的时候把当前的鼠标位置存到两个变量中,显示变量就可以了
嗯,这样也行,多谢了
tcpfeng
2013-01-07
打赏
举报
回复
可以在mouseup的时候把当前的鼠标位置存到两个变量中,显示变量就可以了
【JavaScript源代码】Vue使用鼠标在Canvas上绘制矩形.docx
Vue使用鼠标在Canvas上绘制矩形 本文实例为大家分享了Vue使用鼠标在Canvas上绘制矩形的具体代码,供大家参考,具体内容如下 1.代码
<
div
class="test" style="background-color: burlywood;">
mousedown="
mouse
down" @
mouse
up="
mouse
up" @
mouse
move
="
mouse
move
">
div
>
jQuery实现的鼠标拖动浮层功能示例【拖动
div
等任何标签】
本文实例讲述了jQuery实现的鼠标拖动浮层功能。分享给大家供大家参考,具体如下: 拖动浮层(
div
等任何标签) 之前项目做到一个弹出层需要一个拖动功能,上网上查了资料,发现很多方法,但是感觉都很繁琐,有的甚至没看懂。看了几个方法后发现基本上都是使用
mouse
down、
mouse
move
和
mouse
up这三个函数来写的,然后就自己写了个移动
div
的方法。 先用
mouse
down来判断是否要开启移动,然后通过
mouse
move
来获得移动的距离,实现移动;最后通过
mouse
up
事件
来判断移动结束了。 完整代码实例: <html> <head> <meta charset="utf-8"></
jQuery拖动
div
、移动
div
、弹出层实现原理及示例
代码演示: http://www.imqing.com/demo/move
div
.html 大概原理: 使
div
的position为绝对定位absolute,然后控制其top与left值,需要监听鼠标
事件
,主要用到
mouse
down,
mouse
move
,
mouse
up。 在
mouse
down后,记录
mouse
down时鼠标与需要移动的
div
的位置,然后取得两者之差,得到在鼠标移动后,
div
的位置。即: left = 当前鼠标位置.x – (鼠标点击时的.x值 –
div
的初始位置x值) top = 当前鼠标位置.y – (鼠标点击时的.y值 –
div
的初始位置y值) 代码: 代码如下:
js实现一个可以兼容PC端和移动端的
div
拖动效果实例
前段时间写了一个简单的
div
拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了
问题
,拖动时候用到的三个
事件
:
mouse
down、
mouse
move
、
mouse
up在移动端都不起任何作用。毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是:touchstart、touchmove、touchend
事件
。还有一点要注意的是在PC端获取当前鼠标的坐标是:event.clientX和event.clientY,在移动端获取坐标位置则是:event.touches[0].clientX和event.touches[0].clientY。 下面就来说
vuejs移动端实现
div
拖拽移动
vue移动端实现
div
拖拽移动,供大家参考,具体内容如下 本文讲述,在使用VUE的移动端实现类似于iPhone的悬浮窗的效果。 相关知识点 touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发
mouse
down
mouse
move
mouse
up对应的是PC端的
事件
touchcancel 当一些更高级别的
事件
发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。 效果图 实现步骤 (一)htm
JavaScript
87,904
社区成员
224,614
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章