js实现拖拽

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

css样式（注意：元素要定位，不然没有效果）

.box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #f00;
    cursor: move;
}

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

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

</div>

核心代码

var box = document.getElementById("box");

box.onmousedown = down;  //绑定鼠标按下事件

function down(e) {

    e = e || window.event;  //处理兼容

    this["startX"] = e.clientX;  //在绑定元素身上添加自定义属性 记录鼠标的起始位置与元素的坐标值
    this["startY"] = e.clientY;
    this["startL"] = parseFloat(this.style.left);
    this["startT"] = parseFloat(this.style.top);

    //IE和火狐提供了setCapture方法防止鼠标移动过快，焦点丢失问题,但是谷歌不兼容
    if(this.setCapture) {
        this.setCapture();
    } else {
        var that = this;  //如果不支持，就把事件绑定到document上，不论鼠标移动多快，都不会丢失焦点
        document.onmousemove = function(e) {
            move.call(that, e);  //这里用call改变了this指向，因为如果不使用call，此时执行move方法的this是window，移动元素无效果。
        };
        document.onmouseup = function() {
            up.call(that, e);
        };
    }
}

function move(e) {
    e = e || window.event;

    var curL = (e.clientX - this["startX"]) + this["startL"];
    var curT = (e.clientY - this["startY"]) + this["startT"];

    var minL = 0,
        minT = 0,
        maxL = (document.documentElement.clientWidth || document.body.clientWidth) - this.offsetWidth,
        maxT = (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight;
    //边界值
    curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
    curT = curT < minT ? minT : (curT > maxT ? maxT : curT);

    this.style.left = curL + "px";
    this.style.top = curT + "px";
}

function up(e) {
    e = e || window.event;

    if(this.releaseCapture) { //鼠标抬起，解绑事件
        this.releaseCapture();
    } else {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}

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