84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
做一个在线图片浏览的网页,因为鼠标左右键都被占用了,想用js实现类似于AutoCAD那种用鼠标中键就可拖放图片的功能,找了很久都没找到相关方面的资料,这个应该怎样实现?
走同样的路,发现不同的人生
鼠标移上去的时候判断是否点击了鼠标中键,然后再进行拖拽事件不知道是不是这样?
每一个鼠标事件event对象都有一个button属性,通过button属性指定是哪个键按下
拖拽我吧~ 乖~
拖拽我吧~
乖~
我给你一个Demo。
说一下我的想法,希望能提供一些思路。
拖拽的过程无非是 鼠标按键按下->鼠标移动->鼠标按键释放 三个步骤,只要分别监听这三个事件并记录一些数据就行了。
鼠标按键按下
鼠标移动
鼠标按键释放
我们把所有事件委托到window 对象上,并假定有一个全局变量 var Store = {};。
window
var Store = {};
一、当鼠标按下时 (window.onmousedown 事件):
window.onmousedown
通过 event.target 来判断当前被按住的元素是否可以被拖拽,如果是执行第2步,否则直接返回。
event.target
保存当前被按住的元素的原始位置 Store.originalTop = ?, Store.originalLeft = ? (被按住的元素的 style.position 应该为 absolute)
Store.originalTop = ?
Store.originalLeft = ?
style.position
absolute
通过 event 对象获取按下时鼠标所在的位置 event.pageX, event.pageY, ... 也可以取一些其他你感兴趣的值。把取到的值保存在Store中。
event
event.pageX
event.pageY
...
Store
设置拖拽标志为真 Store.isDragging = true。
Store.isDragging = true
二、当鼠标移动时(window.onmousemove 事件):
window.onmousemove
判断 Store.isDragging === true 是否成立,如果成立,执行第2步,否则直接返回。
Store.isDragging === true
通过 event.pageX, event.pageY, ...,获取当前鼠标位置。 把得到的值与之前保存在 Store 中的相减,以确定鼠标分别在 x,y方向上的偏移量,然后通过得到的偏移量和之前保存在Store 中的 originalTop 和 originalLeft 来更新被拖拽的元素的位置。
x
y
偏移量
originalTop
originalLeft
三、当鼠标释放时(window.onmouseup 事件):
window.onmouseup
设拖拽标志为假 Store.isDragging = false.
Store.isDragging = false
这个问题很简单,你需要去买一个雷蛇或者低端一点的国产鼠标(带宏设置的)安装好驱动,将鼠标中间宏定义为鼠标左键,然后中间和左键的功能也就是一样的了。这样你就可以使用楼上的方法来实现这样的功能。不行你捅了我。。
html5不是有现成的拖拽功能吗?
鼠标移上去的时候判断是否点击了鼠标中键,然后再进行拖拽事件
不知道是不是这样?
每一个鼠标事件event对象都有一个button属性,通过button属性指定是哪个键按下
我给你一个Demo。
说一下我的想法,希望能提供一些思路。
拖拽的过程无非是
鼠标按键按下
->鼠标移动
->鼠标按键释放
三个步骤,只要分别监听这三个事件并记录一些数据就行了。我们把所有事件委托到
window
对象上,并假定有一个全局变量var Store = {};
。一、当鼠标按下时 (
window.onmousedown
事件):通过
event.target
来判断当前被按住的元素是否可以被拖拽,如果是执行第2步,否则直接返回。保存当前被按住的元素的原始位置
Store.originalTop = ?
,Store.originalLeft = ?
(被按住的元素的style.position
应该为absolute
)通过
event
对象获取按下时鼠标所在的位置event.pageX
,event.pageY
,...
也可以取一些其他你感兴趣的值。把取到的值保存在Store
中。设置拖拽标志为真
Store.isDragging = true
。二、当鼠标移动时(
window.onmousemove
事件):判断
Store.isDragging === true
是否成立,如果成立,执行第2步,否则直接返回。通过
event.pageX
,event.pageY
,...
,获取当前鼠标位置。 把得到的值与之前保存在Store
中的相减,以确定鼠标分别在x
,y
方向上的偏移量,然后通过得到的偏移量
和之前保存在Store
中的originalTop
和originalLeft
来更新被拖拽的元素的位置。三、当鼠标释放时(
window.onmouseup
事件):设拖拽标志为假
Store.isDragging = false
.这个问题很简单,你需要去买一个雷蛇或者低端一点的国产鼠标(带宏设置的)安装好驱动,将鼠标中间宏定义为鼠标左键,然后中间和左键的功能也就是一样的了。
这样你就可以使用楼上的方法来实现这样的功能。
不行你捅了我。。
html5不是有现成的拖拽功能吗?