蓝色拖动层+滑动门+滚动代码

 

< html >
< head >
< title > DRAG the DIV </ title >
< style >
* {font - size:12px}
.dragTable{
font - size:12px;
border - top:1px solid #3366cc;
margin - bottom: 10px;
width: 100 % ;
background - color:#FFFFFF;
}
.dragTR{
cursor:move;
color:#7787cc;
background - color:#e5eef9;
}
td{vertical - align:top;}
#parentTable{
border - collapse:collapse;
letter - spacing:25px;
}
</ style >
< script defer >
/* ***JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9***** */
var  draged = false ;
tdiv = null ;
function  dragStart(){
ao = event.srcElement;
if ((ao.tagName == " TD " ) || (ao.tagName == " TR " ))ao = ao.offsetParent;
else   return ;
draged = true ;
tdiv = document.createElement( " div " );
tdiv.innerHTML = ao.outerHTML;
tdiv.style.display = " block " ;
tdiv.style.position = " absolute " ;
tdiv.style.filter = " alpha(opacity=70) " ;
tdiv.style.cursor = " move " ;
tdiv.style.width = ao.offsetWidth;
tdiv.style.height = ao.offsetHeight;
tdiv.style.top = getInfo(ao).top;
tdiv.style.left = getInfo(ao).left;
document.body.appendChild(tdiv);
lastX = event.clientX;
lastY = event.clientY;
lastLeft = tdiv.style.left;
lastTop = tdiv.style.top;
try {
   ao.dragDrop(); 
} catch (e){}
}
function  draging(){ // 重要:判断MOUSE的位置
if ( ! draged) return ;
var  tX = event.clientX;
var  tY = event.clientY;
tdiv.style.left = parseInt(lastLeft) + tX - lastX;
tdiv.style.top = parseInt(lastTop) + tY - lastY;
for ( var  i = 0 ;i < parentTable.cells.length;i ++ ){
    var  parentCell = getInfo(parentTable.cells[i]);
    if (tX >= parentCell.left && tX <= parentCell.right && tY >= parentCell.top && tY <= parentCell.bottom){
     var  subTables = parentTable.cells[i].getElementsByTagName( " table " );
     if (subTables.length == 0 ){
      if (tX >= parentCell.left && tX <= parentCell.right && tY >= parentCell.top && tY <= parentCell.bottom){
      parentTable.cells[i].appendChild(ao);
     }
      break ;
    }
     for ( var  j = 0 ;j < subTables.length;j ++ ){
      var  subTable = getInfo(subTables[j]);
      if (tX >= subTable.left && tX <= subTable.right && tY >= subTable.top && tY <= subTable.bottom){
      parentTable.cells[i].insertBefore(ao,subTables[j]);
       break ;
     } else {
      parentTable.cells[i].appendChild(ao);
     } 
    }
   }
}
}

function  dragEnd(){
if ( ! draged) return ;
draged = false ;
mm = ff( 150 , 15 );
}
function  getInfo(o){ // 取得坐标
var  to = new  Object();
to.left = to.right = to.top = to.bottom = 0 ;
var  twidth = o.offsetWidth;
var  theight = o.offsetHeight;
while (o != document.body){
   to.left += o.offsetLeft;
   to.top += o.offsetTop;
   o = o.offsetParent;
}
   to.right = to.left + twidth;
   to.bottom = to.top + theight;
return  to;
}
function  ff(aa,ab){ // 从GOOGLE网站来,用于恢复位置
var  ac = parseInt(getInfo(tdiv).left);
var  ad = parseInt(getInfo(tdiv).top);
var  ae = (ac - getInfo(ao).left) / ab;
var  af = (ad - getInfo(ao).top) / ab;
return  setInterval( function (){ if (ab < 1 ){
        clearInterval(mm);
        tdiv.removeNode( true );
        ao = null ;
         return
       }
      ab -- ;
      ac -= ae;
      ad -= af;
      tdiv.style.left = parseInt(ac) + " px " ;
      tdiv.style.top = parseInt(ad) + " px "
     }
,aa / ab)
}
function  inint(){ // 初始化
for ( var  i = 0 ;i < parentTable.cells.length;i ++ ){
    var  subTables = parentTable.cells[i].getElementsByTagName( " table " );
    for ( var  j = 0 ;j < subTables.length;j ++ ){
     if (subTables[j].className != " dragTable " ) break ;
    subTables[j].rows[ 0 ].className = " dragTR " ;
    subTables[j].rows[ 0 ].attachEvent( " onmousedown " ,dragStart);
    subTables[j].attachEvent( " ondrag " ,draging);
    subTables[j].attachEvent( " ondragend " ,dragEnd);
   }
}
}
inint();
</ script >
</ head >
< body >
< table border = " 0 "  cellpadding = " 0 "  cellspacing = " 10 "  width = " 100% "  height = 500  id = " parentTable " >
< tr  >
< td width = " 25% "  valgin = " top " >
    < table border = 0  class = " dragTable "  cellspacing = " 0 " >
     < tr >
      < td >< b > GMAIL </ b ></ td >
     </ tr >
     < tr >
      < td > 暂时无法显示GMAIL内容 </ td >
     < tr >
    </ table >< table border = 0  class = " dragTable "  cellspacing = " 0 " >
     < tr >
      < td > 新浪体育 </ td >
     </ tr >
     < tr >
      < td > 解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角 美加施冷箭 </ td >
     < tr >
    </ table >< table border = 0  class = " dragTable "  cellspacing = " 0 " >
     < tr >
      < td > 焦点 </ td >
     </ tr >
     < tr >
      < td > 京广线中断4小时20临客返汉晚点
中国新闻网 - 湖北分社  -  所有  235  相关报道  & raquo;哈马斯已有总理人选
解放日报报业集团  -  所有  489  相关报道  & raquo;陈水扁是两岸关系麻烦制造者
武汉晨报  -  所有  179  相关报道  & raquo; </ td >
     < tr >
    </ table >
</ td >
< td width = " 25% " >
    < table border = 0  class = " dragTable "  cellspacing = " 0 " >
     < tr >
      < td > 中关村在线 </ td >
     </ tr >
     < tr >
      < td > 新年行情速递 双敏板卡低价推荐 终于等到了，映泰6600GT一降降一百 罗技G15游戏键盘热力促销，代购价仅529元  </ td >
     < tr >
    </ table ></ td >
< td width = " 25% " >
    < table border = 0  class = " dragTable "  cellspacing = " 0 " >
     < tr >
      < td > 网易商业 </ td >
     </ tr >
     < tr >
      < td > 上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市 </ td >
     < tr >
    </ table >
</ td >
</ tr >
</ table >
</ body >
</ html >