84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
做一个在线图片浏览的网页,因为鼠标左右键都被占用了,想用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不是有现成的拖拽功能吗?