javascript - js怎样实现用鼠标中键拖拽div?
怪我咯
怪我咯 2017-04-10 16:41:12
0
6
258

做一个在线图片浏览的网页,因为鼠标左右键都被占用了,想用js实现类似于AutoCAD那种用鼠标中键就可拖放图片的功能,找了很久都没找到相关方面的资料,这个应该怎样实现?

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回覆(6)
阿神







拖拽我吧~

乖~

我给你一个Demo。

Peter_Zhu

说一下我的想法,希望能提供一些思路。

拖拽的过程无非是 鼠标按键按下->鼠标移动->鼠标按键释放 三个步骤,只要分别监听这三个事件并记录一些数据就行了。

我们把所有事件委托到window 对象上,并假定有一个全局变量 var Store = {};

一、当鼠标按下时 (window.onmousedown 事件):

  1. 通过 event.target 来判断当前被按住的元素是否可以被拖拽,如果是执行第2步,否则直接返回。

  2. 保存当前被按住的元素的原始位置 Store.originalTop = ?, Store.originalLeft = ? (被按住的元素的 style.position 应该为 absolute

  3. 通过 event 对象获取按下时鼠标所在的位置 event.pageX, event.pageY... 也可以取一些其他你感兴趣的值。把取到的值保存在Store中。

  4. 设置拖拽标志为真 Store.isDragging = true

二、当鼠标移动时(window.onmousemove 事件):

  1. 判断 Store.isDragging === true 是否成立,如果成立,执行第2步,否则直接返回。

  2. 通过 event.pageX, event.pageY...,获取当前鼠标位置。 把得到的值与之前保存在 Store 中的相减,以确定鼠标分别在 x,y方向上的偏移量,然后通过得到的偏移量和之前保存在Store 中的 originalTop originalLeft 来更新被拖拽的元素的位置。

三、当鼠标释放时(window.onmouseup 事件):

  1. 设拖拽标志为假 Store.isDragging = false.

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!