当前页面: 开发资料首页 → J2EE 专题 → javascript 网页拖拽问题急啊!!!!!!!!!!

javascript 网页拖拽问题急啊!!!!!!!!!!

摘要: javascript 网页拖拽问题急啊!!!!!!!!!!

javascript 实现网页拖拽的原理是什么啊?
大侠帮帮忙啊

<head>

DRAG the DIV

<script defer>

/****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/

var Drag={dragged:false,

ao:null,

tdiv:null,

dragStart:function(){

Drag.ao=event.srcElement;

if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){

Drag.ao=Drag.ao.offsetParent;

Drag.ao.style.zIndex=100;

}else

return;

Drag.dragged=true;

Drag.tdiv=document.createElement("div");

Drag.tdiv.innerHTML=Drag.ao.outerHTML;

Drag.ao.style.border="1px dashed red";

Drag.tdiv.style.display="block";

Drag.tdiv.style.position="absolute";

Drag.tdiv.style.filter="alpha(opacity=70)";

Drag.tdiv.style.cursor="move";

Drag.tdiv.style.border="1px solid #000000";

Drag.tdiv.style.width=Drag.ao.offsetWidth;

Drag.tdiv.style.height=Drag.ao.offsetHeight;

Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;

Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;

document.body.appendChild(Drag.tdiv);

Drag.lastX=event.clientX;

Drag.lastY=event.clientY;

Drag.lastLeft=Drag.tdiv.style.left;

Drag.lastTop=Drag.tdiv.style.top;

},

draging:function(){//ﾖﾘﾒｪ:ﾅﾐｶﾏMOUSEｵﾄﾎｻﾖﾃ

if(!Drag.dragged||Drag.ao==null)return;

var tX=event.clientX;

var tY=event.clientY;

Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;

Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;

for(var i=0;i
var parentCell=Drag.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(Drag.ao);

}

break;

}

for(var j=0;j
var subTable=Drag.getInfo(subTables[j]);

if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){

parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);

break;

}else{

parentTable.cells[i].appendChild(Drag.ao);

}

}

}

}

}

,

dragEnd:function(){

if(!Drag.dragged)return;

Drag.dragged=false;

Drag.mm=Drag.repos(150,15);

Drag.ao.style.borderWidth="0px";

Drag.ao.style.borderTop="1px solid #3366cc";

Drag.tdiv.style.borderWidth="0px";

Drag.ao.style.zIndex=1;

},

getInfo:function(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;

},

repos:function(aa,ab){

var f=Drag.tdiv.filters.alpha.opacity;

var tl=parseInt(Drag.getInfo(Drag.tdiv).left);

var tt=parseInt(Drag.getInfo(Drag.tdiv).top);

var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;

var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;

var kf=f/ab;

return setInterval(function(){if(ab<1){

clearInterval(Drag.mm);

Drag.tdiv.removeNode(true);

Drag.ao=null;

return;

}

ab--;

tl-=kl;

tt-=kt;

f-=kf;

Drag.tdiv.style.left=parseInt(tl)+"px";

Drag.tdiv.style.top=parseInt(tt)+"px";

Drag.tdiv.filters.alpha.opacity=f;

}

,aa/ab)

},

inint:function(){//ｳｼｻｯ

for(var i=0;i
var subTables=parentTable.cells[i].getElementsByTagName("table");

for(var j=0;j
if(subTables[j].className!="dragTable")break;

subTables[j].rows[0].className="dragTR";

subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);

}

}

document.onmousemove=Drag.draging;

document.onmouseup=Drag.dragEnd;

}

//end of Object Drag

}

Drag.inint();

function _show(str){

var w=window.open('','');

var d=w.document;

d.open();

str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=/"$1/"$2");

str=str.replace(/(<)(.*?)(>)/g,"<$2>
");

str=str.replace(//r/g,"
/n");

d.write(str);

}

</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>GMAIL</td>

</tr>

<tr>

<td>ﾔﾝﾊｱﾎﾞｷｨﾏﾔﾊｾGMAILﾄﾚﾈﾝ</td>

<tr>

</table><table border=0 class="dragTable" cellspacing="0">

<tr>

<td>ﾐﾂﾀﾋﾌ衲</td>

</tr>

<tr>

<td>ｽ簇ﾊﾍｶﾓｶﾀﾃﾅﾀ鈼W28 2ﾍｪﾒﾇ貳･ﾅ莎ｬｼｶｱ萢ﾙﾆ菴ｱ｣ｺﾐﾁｼｪﾋｹﾐﾀﾏｲﾄﾜﾒﾔｹﾚｾ・ｽ
ﾓ｡ｶﾈｴ鋙ｵｴｴﾏﾂｼﾍﾂｼｷｨﾐﾂﾉ酩ｰﾕｰｶｬｰﾂｶﾌｵﾀﾋﾙｻｬ｣ｺﾖﾐｺｫｳｪﾖﾇ ﾃﾀｼﾓﾊｩﾀ莨</td>

<tr>

</table>

<table border=0 class="dragTable" cellspacing="0">

<tr>

<td>ｽｹｵ・/td>

</tr>

<tr>

<td>ｾｩｹ耘ﾟﾖﾐｶﾏ4ﾐ｡ﾊｱ20ﾁﾙｿﾍｷｵｺｺﾍ昉・ﾖﾐｹ・a class='Channel_KeyLink' href='http://www.51it.org/news/index.html'>ﾐﾂﾎﾅﾍ・ｺｱｱｷﾖﾉ・- ﾋﾐ 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ﾓﾎﾏｷｼ・ﾌﾈﾈﾁｦｴﾙﾏ奣ｬｴ彧ｺｼﾛｽ・29ﾔｪ </td>

<tr>

</table></td>

<td width="25%">

<table border=0 class="dragTable" cellspacing="0">

<tr>

<td>ﾍﾗﾉﾌﾒｵ</td>

</tr>

<tr>

<td>ﾉﾏｺ｣GDPﾔ･ﾄ・ﾖｻﾘﾂ萼ｦｶﾔｷｴﾇ耘・ﾖﾐｹ昻ｬﾆｪﾊﾖｶﾔｿｹﾅｷﾃﾋﾒ・ﾒﾐﾙﾅﾌﾄﾏｷｽﾆ﨤ｵ ｳ､ｰｲﾄｱﾇ昕ﾟﾕ銧蠕ｳﾍ篷ﾏﾊﾐ</td>

<tr>

</table> <table border=0 class="dragTable" cellspacing="0">

<tr>

<td>ｺﾚｿﾉﾌ・ﾂ</td>

</tr>

<tr>

<td>ﾉﾏｺ｣GDPﾔ･ﾄ・ﾖｻﾘﾂ萼ｦｶﾔｷｴﾇ耘・ﾖﾐｹ昻ｬﾆｪﾊﾖｶﾔｿｹﾅｷﾃﾋﾒ・ﾒﾐﾙﾅﾌﾄﾏｷｽﾆ﨤ｵ ｳ､ｰｲﾄｱﾇ昕ﾟﾕ銧蠕ｳﾍ篷ﾏﾊﾐ</td>

<tr>

</table>

</td>

</tr>

</table>

<input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" />

</body>

以上两贴合起来就是你需要的代码

非常感谢
您真是大侠

↑返回目录
前一篇: cmp中为什么关联字段只能在ejbPostCreate里设置？
后一篇: 从sqlserver2000表中取数据，输出到文件当中，当数据类型是nvarchar的时候，取出来是null，不知道怎么回事，别的数据类型好使，代码见内

javascript 网页拖拽问题 急啊!!!!!!!!!!

javascript 网页拖拽问题急啊!!!!!!!!!!