javascript 拖动div

一个用用js实现的拖动方法
有时候有些页面我们没必要引入jquery这样的类库，而我们有时候又得实现某个div层的拖动，这时候这个东东就派上用场了。。。

上传附件上传了好几次 上不去 。。。 贴代码吧/**<br>  * js拖动类 目前一个对象只能够使一个容器得到拖动<br>  * @author yulipu<br>  <br>  * 用法1 普通div<br>  *    <div> <br>  *        这里是内容<br>  *    </div> <br>  * var drag = new YDrag();<br>  * drag.drag({<br>  *         targetDragObj : document.getElementById('outer'),  //必须项 要拖动的目标对象<br>  *        dragX : false,  //不允许横向拖动<br>  *        dragY : true<br>  * });  <br>  * <br>  * 用法2 模拟对话框<br>  *    <div> <br>  *        <div>这里是标题</div> <br>  *        <div>这里是内容</div> <br>  *    </div> <br>  * var drag = new YDrag();<br>  * drag.drag({<br>  *         targetDragObj : document.getElementById('outer'),  //必须项 要拖动的目标对象<br>  *        srcDragObj : document.getElementById('title'),  //非必须项 指定标题部分div<br>  *        dragX:false,  //不允许横向拖动<br>  *        callback : function(){<br>                        //alert(this.x);  // x坐标<br>                        //alert(this.y);  // y坐标<br>                 }  //指定一个回调函数 这个函数可以得到当前容器坐标位置 <br>  * });  <br>  */<br> function YDrag() {<br>     var diffX = 0;  //当前鼠标和容器left距离的差  当前位置-这个差值就是容器的left值<br>     var diffY = 0;<br>     var _self = this;<br>     var options = {};<br>     <br>     var yE = {<br>         /**<br>          * 添加事件<br>          * @param ele 要添加事件的元素<br>          * @param type 事件类型 如click<br>          * @param fun 回调函数<br>          */<br>         bind : function(ele, type, fun) {<br>             if(ele.addEventListener) {  //FF<br>                 ele.addEventListener(type, fun, false);<br>             }else if(ele.attachEvent) {  //IE<br>                 ele.attachEvent('on' + type, fun);<br>             } else {  //DOM<br>                 ele['on'+type] = fun;<br>             }<br>         },<br>     <br>         /**<br>          * 删除事件<br>          */<br>         unbind : function(ele, type, fun) {<br>             if(ele.removeEventListener) {<br>                 ele.removeEventListener(type, fun, false);<br>             } else if(ele.detachEvent) {<br>                 ele.detachEvent('on' + type, fun);<br>             } else {<br>                 ele['on'+type] = null;<br>             }<br>         }<br>     };<br>     <br>     this._mousedown = function(e) {<br>         e = e || window.event;<br>         options.targetDragObj.style.position = 'absolute';<br>         <br>         diffX = e.clientX - options.targetDragObj.offsetLeft;  //初始化差值<br>         diffY = e.clientY - options.targetDragObj.offsetTop;<br>         yE.bind(document, 'mousemove', _self._mousemove);  //往document上添加事件 当鼠标在document范围内移动式都触发移动事件<br>         yE.bind(document, 'mouseup', _self._mouseup);<br>     };<br>     <br>     this._mousemove = function(e) {<br>         e = e || window.event;<br>         if(options.dragable) {<br>             options.dragX && (options.targetDragObj.style.left = e.clientX - diffX + 'px');<br>             options.dragY && (options.targetDragObj.style.top =  e.clientY - diffY + 'px');<br>             if(options.callback){<br>                 //返回当前容器坐标<br>                 var obj = {'x' : e.clientX - diffX, 'y' : e.clientY - diffY};<br>                 options.callback.call(obj);<br>             }<br>         }<br>     };<br>     <br>     this._mouseup = function(e) {<br>         yE.unbind(document, 'mousemove', _self._mousemove);<br>         yE.unbind(document, 'mouseup', _self._mouseup);<br>     };<br>     <br>     this.drag = function(opt) {<br>         options = {<br>             dragable : true,<br>             targetDragObj : opt.targetDragObj,<br>             srcDragObj : opt.srcDragObj,<br>             dragX : opt.dragX != false,  //横向拖动<br>             dragY : opt.dragY != false,  //纵向拖动<br>             callback : opt.callback<br>         };<br>         if(options.srcDragObj) {options.srcDragObj.style.cursor='move';} else {options.targetDragObj.style.cursor='move'}<br>         undefined == options.srcDragObj ? <br>             yE.bind(options.targetDragObj, 'mousedown', this._mousedown) :<br>             yE.bind(options.srcDragObj, 'mousedown', this._mousedown);<br>     };<br> }

AD：真正免费，域名+虚机+企业邮箱=0元