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 ,如需转载请自行联系原博主。
目录
相关文章
|
16天前
|
移动开发 前端开发 JavaScript
js之ajax |12-6
js之ajax |12-6
|
19天前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
31 0
JS配合CSS3实现动画和拖动小星星小Demo
|
3月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
107 24
|
2月前
|
JavaScript 前端开发 网络协议
|
2月前
|
JavaScript 前端开发 安全
js之AJAX
js之AJAX
25 0
|
4月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
3月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch(&#39;url&#39;).then(r =&gt; r.json()).then(data =&gt; console.log(data)).catch(err =&gt; console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
84 0
|
3月前
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
43 0
|
4月前
|
XML 移动开发 前端开发
JS设置Ajax为同步或异步
JS设置Ajax为同步或异步
36 0
|
4月前
|
XML JSON 前端开发
第十一篇JavaScript JSON与AJAX
第十一篇JavaScript JSON与AJAX
28 0