JavaScript实现AJAX的拖动效果-例子2

简介:
代码:
< 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 相关报道 ?哈马斯已有总理人选
解放日报报业集团 - 所有 489 相关报道 ?陈水扁是两岸关系麻烦制造者
武汉晨报 - 所有 179 相关报道 ?
</ 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 >
本文转自博客园执着的笨蛋的博客,原文链接:JavaScript实现AJAX的拖动效果-例子2 ,如需转载请自行联系原博主。
目录
相关文章
|
2月前
|
JavaScript
Vue3 + Js 指定位置进行拖动
Vue3 + Js 指定位置进行拖动
|
2月前
|
前端开发 JavaScript
js + ajax实现商品列表页到详情页的跳转
js + ajax实现商品列表页到详情页的跳转
|
3月前
|
XML JSON 前端开发
深入了解JavaScript中的AJAX和HTTP请求
深入了解JavaScript中的AJAX和HTTP请求
|
1天前
|
JavaScript 前端开发
node.js第四天--ajax在项目中的应用
node.js第四天--ajax在项目中的应用
13 0
|
1天前
|
XML 前端开发 JavaScript
node.js第三天-----ajax(3)
node.js第三天-----ajax(3)
17 0
|
1天前
|
JSON JavaScript 前端开发
node.js第三天-----ajax(2)
node.js第三天-----ajax(2)
14 0
|
1天前
|
JSON 前端开发 JavaScript
node.js第三天-----ajax(1)
node.js第三天-----ajax(1)
22 0
|
2月前
|
XML JSON 前端开发
|
2月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
16 0
|
3月前
|
XML 前端开发 JavaScript
JavaScript高级主题:什么是 AJAX?如何使用它?
JavaScript高级主题:什么是 AJAX?如何使用它?
45 0

相关产品

  • 云迁移中心