界面拖拽

本文系转载，发现的好东东，大家一起共享

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > Freedom </ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< style  type ="text/css" >
  body  { width : 100% ; max-height : 100% ; padding : 0px ; margin : 0px ; text-align : center ; }
  .cell  { float : left ; clear : right ; }
  .row  { clear : both ; }
  .r_nbsp  { width : 20px ; height : 8px ; }
  .root  { width : 646px ; margin :  0 auto ; }
  .root *  { /* 次属性FF的说 */ -moz-user-select : none ; }
  .line  { width : 202px ; line-height : 20px ; height : 20px ; overflow : hidden ; font-size : 12px ; }
  .move  { border : #CCCCCC 1px solid ; width : 200px ; height : auto ; margin-bottom : 8px ; }
  .title  { height : 24px ; cursor : move ; background : #0080C0 ; font-size : 12px ; font-weight : bold ; color : #FFFFFF ; line-height : 24px ; text-align : center ; }
  .content  { border-top : #CCCCCC 1px solid ; height : 100px ; background-color : #F7F7F7 ; }
  .CDrag_temp_div  { border : #f00 1px dashed ; }
</ style >
< script  type ="text/javascript" >

var  Class  =  {
   // 创建类
  create:  function  () {
     return   function  () {
       this .initialize.apply( this , arguments);
    };
  }
};

var  $A  =   function  (a) {
   // 转换数组
   return  a  ?  Array.apply( null , a) :  new  Array;
};

var  $  =   function  (id) {
   // 获取对象
   return  document.getElementById(id);
};

Object.extend  =   function  (a, b) {
   // 追加方法
   for  ( var  i  in  b) a[i]  =  b[i];
   return  a;
};

Object.extend(Object, {

  addEvent :  function  (a, b, c, d) {
     // 添加函数
     if  (a.attachEvent) a.attachEvent(b[ 0 ], c);
     else  a.addEventListener(b[ 1 ]  ||  b[ 0 ].replace( / ^on / ,  "" ), c, d  ||   false );
     return  c;
  },

  delEvent :  function  (a, b, c, d) {
     if  (a.detachEvent) a.detachEvent(b[ 0 ], c);
     else  a.removeEventListener(b[ 1 ]  ||  b[ 0 ].replace( / ^on / ,  "" ), c, d  ||   false );
     return  c;
  },

  reEvent :  function  () {
     // 获取Event
     return  window.event  ?  window.event : ( function  (o) {
       do  {
        o  =  o.caller;
      }  while  (o  &&   ! / ^\[object[ A-Za-z]*Event\]$ / .test(o.arguments[ 0 ]));
       return  o.arguments[ 0 ];
    })( this .reEvent);
  }
});

Function.prototype.bind  =   function  () {
   // 绑定事件
   var  wc  =   this , a  =  $A(arguments), o  =  a.shift();
   return   function  () {
    wc.apply(o, a.concat($A(arguments)));
  };
};


var  Table  =  Class.create();

Table.prototype  =  {

  initialize :  function  () {
     // 初始化
     var  wc  =   this ;
    wc.cols  =   new  Array;  // 创建列
  },

  addCols :  function  (o) {
     // 添加列
     var  wc  =   this , cols  =  wc.cols, i  =  cols.length;
     return  cols[i]  =  {
      id : i, div : o, rows :  new  Array,  // 创建行
      addRow : wc.addRow, chRow : wc.chRow, inRow : wc.inRow, delRow : wc.delRow
    };
  },

  addRow :  function  (o) {
     // 添加行
     var  wc  =   this , rows  =  wc.rows, i  =  rows.length;
     return  rows[i]  =  {
      id : i, div : o, cols : wc
    };
  },

  inRow :  function  (a, b) {
     // 插入行
     var  wc  =  b.cols  =   this , rows  =  wc.rows, i;
     if  (a  <  rows.length) {
       for  (i  =  a ; i  <  rows.length ; i  ++ ) rows[i].id  ++ ;
      rows.splice(a,  0 , b);
      b.id  =  a;
       return  b;
    }  else  {
      b.id  =  rows.length;
       return  rows[b.id]  =  b;
    }
  },

  delRow :  function  (a) {
     // 删除列
     var  wc  =   this , rows  =  wc.rows, i, r;
     if  (a  >=  rows.length)  return ;
    r  =  rows[a];
    rows.splice(a,  1 );
     for  (i  =  a ; i  <  rows.length ; i  ++ ) rows[i].id  =  i;
     return  r;
  }
};

var  CDrag  =  Class.create();

CDrag.IE  =   / MSIE / .test(window.navigator.userAgent);

CDrag.prototype  =  {

  initialize :  function  () {
     // 初始化成员
     var  wc  =   this ;
    wc.table  =   new  Table;  // 建立表格对象
    wc.iFunc  =  wc.eFunc  =   null ;
    wc.obj  =  { on : { a :  null , b :  ""  }, row :  null , left :  0 , top :  0  };
    wc.temp  =  { row :  null , div : document.createElement( " div " ) };
    wc.temp.div.setAttribute(CDrag.IE  ?   " className "  :  " class " ,  " CDrag_temp_div " );
    wc.temp.div.innerHTML  =   " &nbsp; " ;
  },

  reMouse :  function  (a) {
     // 获取鼠标位置
     var  e  =  Object.reEvent();
     return  {
      x : document.documentElement.scrollLeft  +  e.clientX,
      y : document.documentElement.scrollTop  +  e.clientY
    };
  },

  rePosition :  function  (o) {
     // 获取元素绝对位置
     var  $x  =  $y  =   0 ;
     do  {
      $x  +=  o.offsetLeft;
      $y  +=  o.offsetTop;
    }  while  ((o  =  o.offsetParent)  &&  o.tagName  !=   " BODY " );
     return  { x : $x, y : $y };
  },

  sMove :  function  (o) {
     // 当拖动开始时设置参数

     var  wc  =   this ;
     if  (wc.iFunc  ||  wc.eFinc)  return ;

     var  mouse  =  wc.reMouse(), obj  =  wc.obj, temp  =  wc.temp, div  =  o.div, position  =  wc.rePosition(div);

    obj.row  =  o;
    obj.on.b  =   " me " ;
    obj.left  =  mouse.x  -  position.x;
    obj.top  =  mouse.y  -  position.y;

    temp.row  =  document.body.appendChild(div.cloneNode( true ));  // 复制预拖拽对象

     with  (temp.row.style) {
       // 设置复制对象
      position  =   " absolute " ;
      left  =  mouse.x  -  obj.left  +   " px " ;
      top  =  mouse.y  -  obj.top  +   " px " ;
      zIndex  =   100 ;
      opacity  =   " 0.3 " ;
      filter  =   " alpha(opacity:30) " ;
    }

     with  (temp.div.style) {
       // 设置站位对象
      height  =  div.clientHeight  +   " px " ;
      width  =  div.clientWidth  +   " px " ;
    }

     /* div.parentNode.insertBefore(temp.div, div);
    div.style.display = "none"; //隐藏预拖拽对象 */
    div.parentNode.replaceChild(temp.div, div);

    wc.iFunc  =  Object.addEvent(document, [ " onmousemove " ], wc.iMove.bind(wc));
    wc.eFunc  =  Object.addEvent(document, [ " onmouseup " ], wc.eMove.bind(wc));
    document.onselectstart  =   new  Function( " return false " );
  },

  iMove :  function  () {
     // 当鼠标移动时设置参数
     var  wc  =   this , cols  =  wc.table.cols, mouse  =  wc.reMouse(), obj  =  wc.obj, temp  =  wc.temp, row  =  obj.row, div  =  temp.row,
    t_position, t_cols, t_rows, i, j;

     with  (div.style) {
      left  =  mouse.x  -  obj.left  +   " px " ;
      top  =  mouse.y  -  obj.top  +   " px " ;
    }

     for  (i  =   0  ; i  <  cols.length ; i  ++ ) {
      t_cols  =  cols[i];
      t_position  =  wc.rePosition(t_cols.div);
       if  (t_position.x  <  mouse.x  &&  t_position.x  +  t_cols.div.offsetWidth  >  mouse.x) {
         if  (t_cols.rows.length  >   0 ) {  // 如果此列行数大于0
           if  (wc.rePosition(t_cols.rows[ 0 ].div).y  +   20   >  mouse.y) {
             // 如果鼠标位置大于第一行的位置即是最上。。
             // 向上
            obj.on.a  =  t_cols.rows[ 0 ];
            obj.on.b  =   " up " ;
            obj.on.a.div.parentNode.insertBefore(temp.div, obj.on.a.div);
          }  else   if  (t_cols.rows.length  >   1   &&  t_cols.rows[ 0 ]  ==  row  &&
          wc.rePosition(t_cols.rows[ 1 ].div).y  +   20   >  mouse.y) {
             // 如果第一行是拖拽对象而第鼠标大于第二行位置则，没有动。。
             // 向上
            obj.on.b  =   " me " ;
            t_cols.rows[ 1 ].div.parentNode.insertBefore(temp.div, t_cols.rows[ 1 ].div);
          }  else  {
             for  (j  =  t_cols.rows.length  -   1  ; j  >   - 1  ; j  -- ) {
               // 重最下行向上查询
              t_rows  =  t_cols.rows[j];
               if  (t_rows  ==  obj.row)  continue ;
               if  (wc.rePosition(t_rows.div).y  <  mouse.y) {
                 // 如果鼠标大于这行则在这行下面
                 if  (t_rows.id  +   1   <  t_cols.rows.length  &&  t_cols.rows[t_rows.id  +   1 ]  !=  obj.row) {
                   // 如果这行有下一行则重这行下一行的上面插入
                  t_cols.rows[t_rows.id  +   1 ].div.parentNode.
                  insertBefore(temp.div, t_cols.rows[t_rows.id  +   1 ].div);
                  obj.on.a  =  t_rows;
                  obj.on.b  =   " down " ;
                }  else   if  (t_rows.id  +   2   <  t_cols.rows.length) {
                   // 如果这行下一行是拖拽对象则插入到下两行，即拖拽对象返回原位
                  t_cols.rows[t_rows.id  +   2 ].div.parentNode.
                  insertBefore(temp.div, t_cols.rows[t_rows.id  +   2 ].div);
                  obj.on.b  =   " me " ;
                }  else  {
                   // 前面都没有满足则放在最低行
                  t_rows.div.parentNode.appendChild(temp.div);
                  obj.on.a  =  t_rows;
                  obj.on.b  =   " down " ;
                }
                 return ;
              }
            }
          }
        }  else  {
           // 此列无内容添加新行
          t_cols.div.appendChild(temp.div);
          obj.on.a  =  t_cols;
          obj.on.b  =   " new " ;
        }
      }
    }
  },

  eMove :  function  () {
     // 当鼠标释放时设置参数
     var  wc  =   this , obj  =  wc.obj, temp  =  wc.temp, row  =  obj.row, div  =  row.div, o_cols, n_cols;

     if  (obj.on.b  ==   " up " ) {
       // 向最上添加
      o_cols  =  obj.row.cols;
      n_cols  =  obj.on.a.cols;
      n_cols.inRow( 0 , o_cols.delRow(obj.row.id));
    }  else   if  (obj.on.b  ==   " down " ) {
       // 相对向下添加
      o_cols  =  obj.row.cols;
      n_cols  =  obj.on.a.cols;
      n_cols.inRow(obj.on.a.id  +   1 , o_cols.delRow(obj.row.id));
    }  else   if  (obj.on.b  ==   " new " ) {
       // 向无内容列添加
      o_cols  =  obj.row.cols;
      n_cols  =  obj.on.a;
      n_cols.inRow( 0 , o_cols.delRow(obj.row.id));
    }

    temp.div.parentNode.replaceChild(div, temp.div);
    temp.row.parentNode.removeChild(temp.row);
     delete  temp.row;

    Object.delEvent(document, [ " onmousemove " ], wc.iFunc);
    Object.delEvent(document, [ " onmouseup " ], wc.eFunc);
    document.onselectstart  =  wc.iFunc  =  wc.eFunc  =   null ;
  },

  add :  function  (o) {
     // 添加对象
     var  wc  =   this ;
    Object.addEvent(o.div.childNodes[CDrag.IE  ?   0  :  1 ], [ " onmousedown " ], wc.sMove.bind(wc, o));
  },

  parse :  function  (o) {
     // 初始化成员
     var  wc  =   this , table  =  wc.table, cols, i, j;
     for  (i  =   0  ; i  <  o.length ; i  ++ ) {
      cols  =  table.addCols(o[i].cols);
       for  (j  =   0  ; j  <  o[i].rows.length ; j  ++ )
        wc.add(cols.addRow(o[i].rows[j]));
    }
  }

};

Object.addEvent(window, [ " onload " ],  function  () {
   var  wc  =   new  CDrag;
  wc.parse([{cols : $( " m_1 " ), rows : [$( " m_1_1 " ), $( " m_1_2 " ), $( " m_1_3 " )]},{cols : $( " m_2 " ), rows : [$( " m_2_1 " ), $( " m_2_2 " ), $( " m_2_3 " )]},{cols : $( " m_3 " ), rows : [$( " m_3_1 " ), $( " m_3_2 " ), $( " m_3_3 " )]}]);
});

</ script >
</ head >
< body >< br  />
< div  class ="root" >
     < div  class ="cell"  id ="m_1" >
         < div  class ="line" > 第一列 </ div >
         < div  class ="move"  id ="m_1_1" >
             < div  class ="title" > 第一列的第一个的模块 </ div >
             < div  class ="content" ></ div >
         </ div >
         < div  class ="move"  id ="m_1_2" >
             < div  class ="title" > 第一列的第二个的模块 </ div >
             < div  class ="content" ></ div >
         </ div >
         < div  class ="move"  id ="m_1_3" >
             < div  class ="title" > 第一列的第三个的模块 </ div >
             < div  class ="content" ></ div >
         </ div >
     </ div >
     < div  class ="cell r_nbsp" ></ div >
     < div  class ="cell"  id ="m_2" >
         < div  class ="line" > 第二列 </ div >
         < div  class ="move"  id ="m_2_1" >
             < div  class ="title" > 第二列的第一个的模块 </ div >
             < div  class ="content" ></ div >
         </ div >
         < div  class ="move"  id ="m_2_2" >
             < div  class ="title" > 第二列的第二个的模块 </ div >
             < div  class ="content" ></ div >
         </ div >
         < div  class ="move"  id ="m_2_3" >
             < div  class ="title" > 第二列的第三个的模块 </ div >
             < div  class ="content" ></ div >
         </ div >
     </ div >
     < div  class ="cell r_nbsp" ></ div >
     < div  class ="cell"  id ="m_3" >
         < div  class ="line" > 第三列 </ div >
         < div  class ="move"  id ="m_3_1" >
             < div  class ="title" > 第三列的第一个的模块 </ div >
             < div  class ="content" ></ div >
         </ div >
         < div  class ="move"  id ="m_3_2" >
             < div  class ="title" > 第三列的第二个的模块 </ div >
             < div  class ="content" ></ div >
         </ div >
         < div  class ="move"  id ="m_3_3" >
             < div  class ="title" > 第三列的第三个的模块 </ div >
             < div  class ="content" ></ div >
         </ div >
     </ div >
</ div >
</ body >
</ html >