javascript 拖动div

jerry thinkphp 2015年11月18日 收藏
一个用用js实现的拖动方法
有时候有些页面我们没必要引入jquery这样的类库,而我们有时候又得实现某个div层的拖动,这时候这个东东就派上用场了。。。

上传附件上传了好几次 上不去 。。。 贴代码吧
  1. /**
  2.  * js拖动类 目前一个对象只能够使一个容器得到拖动
  3.  * @author yulipu
  4.  
  5.  * 用法1 普通div
  6.  *    <div id="outer">
  7.  *        这里是内容
  8.  *    </div>
  9.  * var drag = new YDrag();
  10.  * drag.drag({
  11.  *         targetDragObj : document.getElementById('outer'),  //必须项 要拖动的目标对象
  12.  *        dragX : false,  //不允许横向拖动
  13.  *        dragY : true
  14.  * });  
  15.  * 
  16.  * 用法2 模拟对话框
  17.  *    <div id="outer">
  18.  *        <div id="title">这里是标题</div>
  19.  *        <div>这里是内容</div>
  20.  *    </div>
  21.  * var drag = new YDrag();
  22.  * drag.drag({
  23.  *         targetDragObj : document.getElementById('outer'),  //必须项 要拖动的目标对象
  24.  *        srcDragObj : document.getElementById('title'),  //非必须项 指定标题部分div
  25.  *        dragX:false,  //不允许横向拖动
  26.  *        callback : function(){
  27.                        //alert(this.x);  // x坐标
  28.                        //alert(this.y);  // y坐标
  29.                 }  //指定一个回调函数 这个函数可以得到当前容器坐标位置 
  30.  * });  
  31.  */
  32. function YDrag() {
  33.     var diffX = 0;  //当前鼠标和容器left距离的差  当前位置-这个差值就是容器的left值
  34.     var diffY = 0;
  35.     var _self = this;
  36.     var options = {};
  37.     
  38.     var yE = {
  39.         /**
  40.          * 添加事件
  41.          * @param ele 要添加事件的元素
  42.          * @param type 事件类型 如click
  43.          * @param fun 回调函数
  44.          */
  45.         bind : function(ele, type, fun) {
  46.             if(ele.addEventListener) {  //FF
  47.                 ele.addEventListener(type, fun, false);
  48.             }else if(ele.attachEvent) {  //IE
  49.                 ele.attachEvent('on' + type, fun);
  50.             } else {  //DOM
  51.                 ele['on'+type] = fun;
  52.             }
  53.         },
  54.     
  55.         /**
  56.          * 删除事件
  57.          */
  58.         unbind : function(ele, type, fun) {
  59.             if(ele.removeEventListener) {
  60.                 ele.removeEventListener(type, fun, false);
  61.             } else if(ele.detachEvent) {
  62.                 ele.detachEvent('on' + type, fun);
  63.             } else {
  64.                 ele['on'+type] = null;
  65.             }
  66.         }
  67.     };
  68.     
  69.     this._mousedown = function(e) {
  70.         e = e || window.event;
  71.         options.targetDragObj.style.position = 'absolute';
  72.         
  73.         diffX = e.clientX - options.targetDragObj.offsetLeft;  //初始化差值
  74.         diffY = e.clientY - options.targetDragObj.offsetTop;
  75.         yE.bind(document, 'mousemove', _self._mousemove);  //往document上添加事件 当鼠标在document范围内移动式都触发移动事件
  76.         yE.bind(document, 'mouseup', _self._mouseup);
  77.     };
  78.     
  79.     this._mousemove = function(e) {
  80.         e = e || window.event;
  81.         if(options.dragable) {
  82.             options.dragX && (options.targetDragObj.style.left = e.clientX - diffX + 'px');
  83.             options.dragY && (options.targetDragObj.style.top =  e.clientY - diffY + 'px');
  84.             if(options.callback){
  85.                 //返回当前容器坐标
  86.                 var obj = {'x' : e.clientX - diffX, 'y' : e.clientY - diffY};
  87.                 options.callback.call(obj);
  88.             }
  89.         }
  90.     };
  91.     
  92.     this._mouseup = function(e) {
  93.         yE.unbind(document, 'mousemove', _self._mousemove);
  94.         yE.unbind(document, 'mouseup', _self._mouseup);
  95.     };
  96.     
  97.     this.drag = function(opt) {
  98.         options = {
  99.             dragable : true,
  100.             targetDragObj : opt.targetDragObj,
  101.             srcDragObj : opt.srcDragObj,
  102.             dragX : opt.dragX != false,  //横向拖动
  103.             dragY : opt.dragY != false,  //纵向拖动
  104.             callback : opt.callback
  105.         };
  106.         if(options.srcDragObj) {options.srcDragObj.style.cursor='move';} else {options.targetDragObj.style.cursor='move'}
  107.         undefined == options.srcDragObj ? 
  108.             yE.bind(options.targetDragObj, 'mousedown', this._mousedown) :
  109.             yE.bind(options.srcDragObj, 'mousedown', this._mousedown);
  110.     };
  111. }