js实现拖拽

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

<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 }