首页 > Web开发 > 详细

js原生代码实现鼠标拖拽(超简单)

时间:2018-12-26 00:55:08      阅读:181      评论:0      收藏:0      [点我收藏+]

首先先来看这一张图

技术分享图片

在这种图中,盒子的大小为512px,并且margin-left:-250px margin-top:140px;并通过一些样式让其在中部显示

这些样式都不是重要的,这里加个margin是为了让其出现拖拽的时候出现鼠标偏移,好做演示而已,不然margin:0 auto 就可以实现盒子的居中

首先通过offsetLeft的方法获取到盒子的偏移值,然后在通过clientX,clientY获取到鼠标的坐标,通过当前坐标减去offsetLeft的坐标就可以获取鼠标在div里面的

具体数值,也就是鼠标应该在的地方

这个时候拖拽的时候回出现鼠标偏移的现象,没错,这是margin值搞的鬼,margin也是盒子的一部分,所有要获取到鼠标在盒子里面的位置的话,加上的margin要减掉

减掉的margin要加上,这个是我根据思路得到的代码,可以参考一下,大神请忽悠

技术分享图片

 

js原生代码实现鼠标拖拽(超简单)

原文:https://www.cnblogs.com/wikina/p/10177117.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!