最近在做一个小应用时碰到一个需求是 鼠标可以拖动图片,然后在鼠标单击图片的时候可以放大图片。
这样就碰到一个问题,因为鼠标要实现拖放,鼠标首先是要单击图片然后才开始 拖放。所以拖放和放大功能就会重叠。
要解决这个问题,网上搜到一个解决方法是 设置一个全局变量。
因为拖放时 鼠标的 动作顺序是: a1 鼠标点击(mousedown), a2 鼠标移动(mousemove), a3 鼠标抬起(mouseup)
放大时 鼠标的 动作顺序是: b1 鼠标点击(mousedown), b2 鼠标抬起(mouseup)
所以 在实现 单击放大的时候 不用click事件, 而是用mouseup。
设置一个isdrag的全局变量,在a1和b1的鼠标点击的时候设置为false,只有在a2鼠标移动的时候才把 isdrag 设置为true, 这样就只有放大的时候 mouseup的函数才会被调用。
//drag code
$img.mousedown(function(e){
isdrag = false;
$img.bind('mousemove.dragstart', function(e){
isdrag = true;
.......
.........
.........
return false
})
return false
})
$(document).bind('mouseup', function(e){
$img.unbind('mousemove.dragstart');
})
// zoom code
$img.bind('mouseup', function(e){
if(!isdrag){
..............
..............
..............
}
})
分享到:
相关推荐
js 前端鼠标拖动事件实例
videojs视频可拖动播放与不可拖动播放
JS区分鼠标拖动事件与鼠标双击事件,用于SVG或者GIS中,模拟地图操作
js 图片 随意 拖动 全屏 随意拖动 js 图片 随意 拖动 全屏 随意拖动
此代码是js的鼠标拖动拖动事件的应用,模拟winform中的拖动事件
javascript js 鼠标事件 大全,js鼠标拖动事件,js鼠标移动事件.docx
js实现鼠标在特定框内拖动图片,鼠标位置超出框则无法移动。
JS可拖动层 javascript可拖动层
可以实现行拖动,div拖动,图片拖动,例子中是行之间的拖动。
拖动控件时不触发事件,给新人的 免费提供
js拖动一个容器中的内容到另一个容器中,并且删除原容器中的该内容。
今天用vue+原生js的mousemove事件,写了个拖动,发现只能慢慢拖动才行,鼠标只要移动快了,就失效,不能拖动了; 搞了半天在,总算解决了,但是问题的深层原理还没搞清楚,知道的大侠可以留言分享,下面直接上代码:...
JS写的时间拖动条,UI仿照QQ影音中的视频剪辑拖动条
js拖动div并拖动DIV的大小,js拖动div并拖动DIV的大小
JS实现拖动 自己学习用 通过JS实现拖动
如果不加控制,双击一个HTML对象时,会连续触发鼠标落下、开始拖动、抬起和双击事件,这对利用对象的事件产生干扰。本文巧妙的把这几个事件区分开来,每个事件都干干净净,不会受到其它事件的影响。需要注意的是,...
js滑块拖动图片对比效果代码 js滑块拖动图片对比效果代码
js拖动代码 js拖动效果 js拖动例子
JQ JS javascript layui UI组件 元素 div 拖动插件JQ JS javascript layui UI组件 元素 div 拖动插件
大家可以看下js如何简单实现拖动