js实现拖拽

拖拽效果在网站中是很常见的一种效果,其实现原理很简单,不过其中也隐藏了不少关键知识点,比如说焦点丢失问题等。接下来看看具体代码是怎么实现的。

css样式(注意:元素要定位,不然没有效果)

1 .box {
2     position: absolute;
3     width: 100px;
4     height: 100px;
5     background-color: #f00;
6     cursor: move;
7 }

html结构(这里为什么使用行内样式,因为后面操作需要获取元素的css样式,原生的js只能获取行内样式css。)

<div class="box" id="box" style="left: 0px;top: 0px;">

</div>

核心代码

 1 var box = document.getElementById("box");
 2 
 3 box.onmousedown = down;  //绑定鼠标按下事件
 4 
 5 function down(e) {
 6 
 7     e = e || window.event;  //处理兼容
 8 
 9     this["startX"] = e.clientX;  //在绑定元素身上添加自定义属性 记录鼠标的起始位置与元素的坐标值
10     this["startY"] = e.clientY;
11     this["startL"] = parseFloat(this.style.left);
12     this["startT"] = parseFloat(this.style.top);
13 
14     //IE和火狐提供了setCapture方法防止鼠标移动过快,焦点丢失问题,但是谷歌不兼容
15     if(this.setCapture) {
16         this.setCapture();
17     } else {
18         var that = this;  //如果不支持,就把事件绑定到document上,不论鼠标移动多快,都不会丢失焦点
19         document.onmousemove = function(e) {
20             move.call(that, e);  //这里用call改变了this指向,因为如果不使用call,此时执行move方法的this是window,移动元素无效果。
21         };
22         document.onmouseup = function() {
23             up.call(that, e);
24         };
25     }
26 }
27 
28 function move(e) {
29     e = e || window.event;
30 
31     var curL = (e.clientX - this["startX"]) + this["startL"];
32     var curT = (e.clientY - this["startY"]) + this["startT"];
33 
34     var minL = 0,
35         minT = 0,
36         maxL = (document.documentElement.clientWidth || document.body.clientWidth) - this.offsetWidth,
37         maxT = (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight;
38     //边界值
39     curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
40     curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
41 
42     this.style.left = curL + "px";
43     this.style.top = curT + "px";
44 }
45 
46 function up(e) {
47     e = e || window.event;
48 
49     if(this.releaseCapture) { //鼠标抬起,解绑事件
50         this.releaseCapture();
51     } else {
52         document.onmousemove = null;
53         document.onmouseup = null;
54     }
55 }

其中关键点就是事件中的e对象,这个对象提供了很多有用的信息,我们常用到clientX,clientY,pageX,pageY等。

转载于:https://www.cnblogs.com/zt123123/p/7637306.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值