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

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

怪我咯
怪我咯

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

membalas semua (6)
Ty80

鼠标移上去的时候判断是否点击了鼠标中键,然后再进行拖拽事件
不知道是不是这样?

    小葫芦

    每一个鼠标事件event对象都有一个button属性,通过button属性指定是哪个键按下

      阿神
           
      

      拖拽我吧~

      乖~

      我给你一个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中的originalToporiginalLeft来更新被拖拽的元素的位置。

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

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

          大家讲道理

          这个问题很简单,你需要去买一个雷蛇或者低端一点的国产鼠标(带宏设置的)安装好驱动,将鼠标中间宏定义为鼠标左键,然后中间和左键的功能也就是一样的了。
          这样你就可以使用楼上的方法来实现这样的功能。
          不行你捅了我。。

            左手右手慢动作

            html5不是有现成的拖拽功能吗?

              Muat turun terkini
              Lagi>
              kesan web
              Kod sumber laman web
              Bahan laman web
              Templat hujung hadapan
              Tentang kita Penafian Sitemap
              Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!