js实现拖拽

Posted CSS is awesome

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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等。

以上是关于js实现拖拽的主要内容,如果未能解决你的问题,请参考以下文章

纯js实现DIV拖拽

JS拖拽效果的原理及实现

vuejs2.0使用Sortable.js实现的拖拽功能( 转)

拖拽系列利用JS面向对象OOP思想实现拖拽封装

js实现拖拽

js拖拽问题,求大神详解