不看会后悔的Windows XP之经验谈	简单快捷DIY实用家庭影院

我想找一个实现拖动的个性化网页布局代码，无法如愿哪位有

楼主cqhydz（混点分加个角）2006-06-04 11:11:03 在 Web 开发 / Ajax 提问

找了不少，但一离开IE就卡壳，哪位有Mozilla Firefox下还能正常工作的代码问题点数：30、回复次数：26Top

1 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-04 15:27:34 得分 0

我这里是有一份兼容FF的代码的，不过一下子找不到了，东西太乱了。而且最近也比较忙，所以...如果没有的话，再写一份代码吧。有什么地方有问题的，pm我。Top

2 楼cqhydz（混点分加个角）回复于 2006-06-05 10:59:02 得分 0

1\我发现以下代码Firefox下运行的确有错，老大可试一下，
2\还有就是_show我修改了一下想直接保存布局变化后的页面，但如果是以下代码会出现一个问题，如果是页面（全部）方式保存变动布局的页面会保存为原始页，但改为页面(仅Html)方式则可以将变动布局的页保存下来，不解?
function _show(str){
var w=window.open('','');
var d=w.document;
d.open();
//str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");
//str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");
//str=str.replace(/\r/g,"<br />\n");
d.write(str);
}
====================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<html>
<head>
<title>DRAG the DIV</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
*{font-size:12px}
.dragTable{
font-size:12px;
border-top:1px solid #3366cc;
margin-bottom: 10px;
width:100%;
background-color:#FFFFFF;
}
td{vertical-align:top;}
.dragTR{
cursor:move;
color:#7787cc;
background-color:#e5eef9;
height:20px;
padding-left:5px;
font-weight:bold;
}
#parentTable{
border-collapse:collapse;
letter-spacing:25px;
}
</style>
<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<parentTable.cells.length;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<subTables.length;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<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",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,"<span style='color:red;'><$2></span><br />");
str=str.replace(/\r/g,"<br />\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><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万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角美加施冷箭</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><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>
</html>

</BODY>
</HTML>
Top

3 楼cqhydz（混点分加个角）回复于 2006-06-05 11:09:40 得分 0

3、<script defer>我查了Firefox不支持，在运行中
for(var i=0;i<parentTable.cells.length;i++){ 这句提示出错,我取消了defer ,将js全部移到<input>但仍出错Top

4 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-05 13:00:21 得分 10

先告诉你几个问题，你改改；
加上var ie = (document.all) ? true : false;

一、subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart)
改成if(!ie)subTables[j].rows[0].attachListerner("...","...",false)

二、style.filter=..
改成ie ? style.filter=... : style.MozOpacity=...Top

5 楼TSD（智之选,商欲达--智商购物系统zhishop.com）回复于 2006-06-05 16:26:42 得分 0

markTop

6 楼cqhydz（混点分加个角）回复于 2006-06-05 17:34:14 得分 0

加上var ie = (document.all) ? true : false;
>>我加在第一行，不知是否正确
一、subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart)
改成if(!ie)subTables[j].rows[0].attachListerner("...","...",false)
>>attachListerner属性是做什么的，我在google也没收到，还有"...","..."不写代码吗。
二、style.filter=..
改成ie ? style.filter=... : style.MozOpacity=
>>这段我的代码中只有Drag.tdiv.style.filter="alpha(opacity=70)";这段看起来像，但我看了一下也不太对啊,没改
>>firefox出错仍在老位置,谢谢你的回复Top

7 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-05 20:14:10 得分 0

attachListener是手误，不好意思:D应该是addEventListener(evt, fun, false);
是mozzila的事件监听，evt事件是没有on的，如"onmouseover"，直接写"mouseover"就好了
fun，也就是attachEvent("onmousedown",Drag.dragStart)
中的Drag.dragStart

改成ie ? style.filter=... : style.MozOpacity=0.7

这里的MozOpacity是兼容mozzila的透明度
Top

8 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-05 20:16:08 得分 0

关于mozzila的css，这里有一些资料可看的，不过我还没有把东西写完

http://blog.csdn.net/BlueDestiny/category/204937.aspxTop

9 楼califord（远方）回复于 2006-06-05 20:38:43 得分 0

看看Top

10 楼cqhydz（混点分加个角）回复于 2006-06-06 14:46:16 得分 0

照提示修改后仍出错，位置同以前一样，谢谢你的抽时间解答，有时间老大再看一下，发一份完整代码。再次谢谢了Top

11 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-06 16:10:45 得分 0

把改好的代码贴出来呀...-_-!

你如果是不急的话，应该学着自己改改，就当学点新东西也好呀，况且，有什么问题，兄弟们都好帮你解答，想当初我一个人摸索的时候走了不少弯路呢Top

12 楼cqhydz（混点分加个角）回复于 2006-06-07 08:47:18 得分 0

谢谢，但的确有点多问题，由于大家工作都应比较忙，我怕担误你们较多的时间，
比如
var Drag={dragged:false,
ao:null,
tdiv:null,
dragStart:function(){}
}
我第一次看到这种定义，用：号来定义函数，还有为什么要将所有的给Drag。按我的理解是不是将Drag,做为一个对象dragStart:function(){}这是对象的方法，如果是ao:null表示属性。不知理解是否正确Top

13 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-08 15:44:56 得分 0

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>Top

14 楼cqhydz（混点分加个角）回复于 2006-06-11 11:17:19 得分 0

还在努力中，将数据保存下来。Top

15 楼deninghe（毛毛虫ァ野战军->挺进中原）回复于 2006-06-11 13:28:00 得分 0

哦Top

16 楼ttt2（孩子她爸）回复于 2006-06-14 15:10:32 得分 10

改自上面程序的可以保存在cookie中

<HEAD><TITLE>DRAG the DIV</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>
*{font-size:12px}
.dragTable{
font-size:12px;
border-top:1px solid #3366cc;
margin-bottom: 10px;
width:100%;
background-color:#FFFFFF;
}
td{vertical-align:top;}
.dragTR{
cursor:move;
color:#7787cc;
background-color:#e5eef9;
height:20px;
padding-left:5px;
font-weight:bold;
}
#parentTable{
border-collapse:collapse;
letter-spacing:25px;
}
</STYLE>

<SCRIPT defer>
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<parentTable.cells.length;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<subTables.length;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<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",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,"<span style='color:red;'><$2></span><br />");
str=str.replace(/\r/g,"<br />\n");
d.write(str);
}

function getContent(){
document.myform.content.value=document.documentElement.innerHTML;
return;
}

</SCRIPT>
</HEAD>
<BODY>
<TABLE id=parentTable height=500 cellSpacing=10 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="25%" valgin="top" id="td0">
<TABLE id="tab1" class=dragTable style="BORDER-RIGHT: red 0px dashed; BORDER-TOP: #3366cc 1px solid; Z-INDEX: 1; BORDER-LEFT: red 0px dashed; BORDER-BOTTOM: red 0px dashed" cellSpacing=0 border=0>
<TBODY>
<TR class=dragTR>
<TD>新浪体育</TD></TR>
<TR>
<TD>1</TD>
<TR></TR></TBODY></TABLE>
<TABLE id="tab2" class=dragTable style="BORDER-RIGHT: red 0px dashed; BORDER-TOP: #3366cc 1px solid; Z-INDEX: 1; BORDER-LEFT: red 0px dashed; BORDER-BOTTOM: red 0px dashed" cellSpacing=0 border=0>
<TBODY>
<TR class=dragTR >
<TD>黑可天下</TD></TR>
<TR>
<TD>2</TD>
<TR></TR></TBODY></TABLE>
<TABLE id="tab3" class=dragTable style="BORDER-RIGHT: red 0px dashed; BORDER-TOP: #3366cc 1px solid; Z-INDEX: 1; BORDER-LEFT: red 0px dashed; BORDER-BOTTOM: red 0px dashed" cellSpacing=0 border=0>
<TBODY>
<TR class=dragTR>
<TD>网易商业</TD></TR>
<TR>
<TD>3</TD>
<TR></TR></TBODY></TABLE>
<TABLE id="tab4" class=dragTable style="BORDER-RIGHT: red 0px dashed; BORDER-TOP: #3366cc 1px solid; Z-INDEX: 1; BORDER-LEFT: red 0px dashed; BORDER-BOTTOM: red 0px dashed" cellSpacing=0 border=0>
<TBODY>
<TR class=dragTR>
<TD>焦点</TD></TR>
<TR>
<TD>4</TD>
<TR></TR></TBODY></TABLE>
<TABLE id="tab5" class=dragTable style="BORDER-RIGHT: red 0px dashed; BORDER-TOP: #3366cc 1px solid; Z-INDEX: 1; BORDER-LEFT: red 0px dashed; BORDER-BOTTOM: red 0px dashed" cellSpacing=0 border=0>
<TBODY>
<TR class=dragTR>
<TD><B>GMAIL</B></TD></TR>
<TR>
<TD>5</TD>
<TR></TR></TBODY></TABLE>
<TABLE id="tab6" name="6" class=dragTable style="BORDER-RIGHT: red 0px dashed; BORDER-TOP: #3366cc 1px solid; Z-INDEX: 1; BORDER-LEFT: red 0px dashed; BORDER-BOTTOM: red 0px dashed" cellSpacing=0 border=0>
<TBODY>
<TR class=dragTR>
<TD>中关村在线</TD></TR>
<TR>
<TD>6</TD>
<TR></TR></TBODY></TABLE>
</TD>
<TD width="25%" id="td1">
</TD>
<TD width="25%" id="td2"></TD></TR></TBODY></TABLE>
<form name="form1">
<input type="hidden" name="place1" value="1,2|6|3,4,5">
<input type="button" value="setplace" onclick="settable()">
</FORM></BODY>
<script language="javascript">
function iniload()
{
var i
for(i=1;i<7;i++)
{
document.getElementById('tab'+i).style.display="none"
}

var place=document.form1.place1.value
var tempp1=place.split("|")
var tempp2
var t

for(i=0;i<tempp1.length;i++)
{
if(tempp1[i]!="")
{
tempp2=tempp1[i].split(",");
for(t=0;t<tempp2.length;t++)
{

parentTable.cells[i].appendChild(document.getElementById('tab'+tempp2[t]));
document.getElementById('tab'+tempp2[t]).style.display=""
}
}

}

}

iniload()

function settable()
{
var bl=""

for(var i=0;i<3;i++)

{

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

for(var j=0;j<subTables.length;j++){
if(subTables[j].className=="dragTable")
{
if(bl==""){
bl=subTables[j].id.replace("tab","")
}
else
{
bl=bl +","+subTables[j].id.replace("tab","")
}
}

}
bl=bl+"|"

}
alert(bl.substring(0,bl.length-1))
}

</script>Top

17 楼ttt2（孩子她爸）回复于 2006-06-14 15:36:35 得分 0

这里有点小错误,正确代码
function settable()
{
var bl=""
var bl2=""
for(var i=0;i<3;i++)

{

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

for(var j=0;j<subTables.length;j++){
if(subTables[j].className=="dragTable")
{
if(bl2==""){
bl2=subTables[j].id.replace("tab","")
}
else
{
bl2=bl2 +","+subTables[j].id.replace("tab","")
}
}

}

if(bl=="" && bl2=="")
{
bl="|"
}
else
{
bl=bl +"|" +bl2
}
bl2=""
}
alert(bl.substring(1,bl.length))
//alert(bl)
}
Top

18 楼pwqzc（吴旗娃徒也~~老鼠粮仓之路）回复于 2006-06-14 16:27:07 得分 0

经典代码
虽然不能够跨浏览器
但是已经很好了啊Top

19 楼cqhydz（混点分加个角）回复于 2006-06-14 23:21:33 得分 0

>>改自上面程序的可以保存在cookie中
谢谢你的回复，程序的载入各分解我看明白了，但有一点我没看明白，拖动后自动保存在cookie中的代码在哪里，我没找到呢，也没发现其它地方有cookie调用保存的地方。Top

20 楼cqhydz（混点分加个角）回复于 2006-06-14 23:23:19 得分 0

pwqzc(吴旗娃徒也~~老鼠粮仓之路)
其实网上有更好的原型，其实如果用xmlhttp提交到服务器端就能解决跨浏览器的问题Top

21 楼pwqzc（吴旗娃徒也~~老鼠粮仓之路）回复于 2006-06-15 08:08:46 得分 0

cqhydz(混点分加个角)
其实网上有更好的原型，其实如果用xmlhttp提交到服务器端就能解决跨浏览器的问题?
什么意思呢？
用xmlhttp就能够跨浏览器了吗？
不会吧

http://www.99scj.com
99收藏夹
全站atlas，ajax实现
拖动无刷新
在线收藏，在线RSS阅读，个性导航，再线订阅Top

22 楼net205（人不可以无耻到这种地步）回复于 2006-06-15 21:22:22 得分 0

收藏，不错..Top

23 楼net205（人不可以无耻到这种地步）回复于 2006-06-15 21:23:05 得分 0

pwqzc(吴旗娃徒也~~老鼠粮仓之路)
--------------------
跑这来了...Top

24 楼Radar2006（中华英雄）回复于 2006-06-16 14:54:37 得分 0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm2</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<SCRIPT language="javascript">

/*--------全局变量-----------*/
var x0,y0,x1,y1,isreplace;
var movable = false;
var preCell = null;
var normalColor = null;
var preColor = "lavender";
var endColor = "#FFCCFF";
/*--------全局变量-----------*/

//得到控件的绝对位置
function getPos(cell)
{
var pos = new Array();
var t=cell.offsetTop;
var l=cell.offsetLeft;
while(cell=cell.offsetParent)
{
t+=cell.offsetTop;
l+=cell.offsetLeft;
}
pos[0] = t; //纵坐标
pos[1] = l; //横坐标
return pos;
}

//当鼠标拖动某一个td时,显示临时图层
function showDiv(ischange)
{
var ischange=ischange
isreplace=ischange //得到触发该事件的是哪个table来决定是否替换
var obj = event.srcElement; //得到触发该事件的对象,也就是对触发该事件对象的一个引用
var pos = new Array(); //定义一个数组用来存放位置参数
//获取过度图层
var oDiv = document.all.tempDiv; //对临时层的一个引用
if(obj.tagName.toLowerCase() == "td")
{
obj.style.cursor = "hand"; //当按下鼠标时,鼠标模式改成手型
pos = getPos(obj); //得到该td的位置(包括横纵坐标)
//计算中间过度层位置，赋值
oDiv.style.width = obj.offsetWidth; //得到td的宽,赋值给临时层tempDiv
oDiv.style.height = obj.offsetHeight; //得到td的高,赋值给临时层tempDiv
oDiv.style.top = pos[0]; //得到该td的纵坐标的位置,赋值给临时层tempDiv
oDiv.style.left = pos[1]; //得到该td的横坐标的位置,赋值给临时层tempDiv
oDiv.innerHTML = obj.innerHTML; //得到该td的文本显示内容,赋值给临时层tempDiv
oDiv.style.display = ""; //显示临时层,也就是当鼠标选中某一个td,按下去时显示的那个紫红色的框框
x0 = pos[1];
y0 = pos[0];
x1 = event.clientX; //返回当前鼠标所在位置的横坐标
y1 = event.clientY; //返回当前鼠标所在位置的纵坐标
//记住原td
normalColor = obj.style.backgroundColor; //得到触发该事件对象的背景色
obj.style.backgroundColor = preColor; //改变触发该事件的对象的背景色
preCell = obj; //赋值给另外一个空对象(属公共的变量)

movable = true; //标识有td在移动
}
}
//当拖动一个td时,经过其他td时所处理的事件
function dragDiv()
{
if(movable) //当上面的showDiv事件为真时,执行下面的代码
{
var oDiv = document.all.tempDiv; //对临时层的一个引用
var pos = new Array(); //定义一个存放位置的数组
oDiv.style.top = event.clientY - y1 + y0; //定义临时层的位置(纵坐标)为:当前鼠标位置(纵坐标)-按下鼠标时的鼠标位置(纵坐标)+原来td的纵坐标
oDiv.style.left = event.clientX - x1 + x0; //定义临时层的位置(横坐标)为:当前鼠标位置(横坐标)-按下鼠标时的鼠标位置(横坐标)+原来td的横坐标
var oTable = document.all.tb2;
//根据条件显示不同背景色
for(var i=0; i<oTable.cells.length; i++)
{
if(oTable.cells[i].tagName.toLowerCase() == "td")
{
pos = getPos(oTable.cells[i]);
if(event.x>pos[1] && event.x<pos[1]+oTable.cells[i].offsetWidth && event.y>pos[0] && event.y<pos[0]+oTable.cells[i].offsetHeight)
{
if(oTable.cells[i] != preCell)
oTable.cells[i].style.backgroundColor = endColor;
}
else
{
if(oTable.cells[i] != preCell)
oTable.cells[i].style.backgroundColor = normalColor;
}
}
}
}
}

function hideDiv()
{
if(movable)
{
var oTable = document.all.tb2;
var pos = new Array();
if(preCell != null)
{
for(var i=0; i<oTable.cells.length; i++)
{
pos = getPos(oTable.cells[i]);
//计算鼠标位置，是否在某个单元格的范围之内
if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth && event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
{
if(oTable.cells[i].tagName.toLowerCase() == "td" && oTable.cells[i].style.backgroundColor.toLowerCase()=="#ffccff")
{
if(isreplace=="2"){ //如果是下面表格内部拖动,则内容互换
preCell.innerHTML = oTable.cells[i].innerHTML;
}
//当下面的td中有内容时,则上面的课程将与下面的课程互换----注意:这个if和下面紧接着的if位置不能互换.
if(isreplace=="1" && oTable.cells[i].innerText.length > 1){
preCell.innerHTML= oTable.cells[i].innerHTML
oTable.cells[i].innerHTML = document.all.tempDiv.innerHTML;
}
//当下面的td中没有内容时,则上面的课程将被移除----注意:这个if和上面紧接着的if位置不能互换.
if(isreplace=="1" && oTable.cells[i].innerText.length == 1){
preCell.innerHTML=""
oTable.cells[i].innerHTML = document.all.tempDiv.innerHTML;
}

if(isreplace=="2"){
oTable.cells[i].innerHTML = document.all.tempDiv.innerHTML;
}
//清除原单元格和目标单元格的样式
preCell.style.backgroundColor = normalColor;
oTable.cells[i].style.backgroundColor = normalColor;
oTable.cells[i].style.cursor = "";
preCell.style.cursor = "";
preCell.style.backgroundColor = normalColor;
}
}
}
}
movable = false;
//清除提示图层
document.all.tempDiv.style.display = "none";
}
}
//在页面提交时触发下面的事件,给隐藏字段赋值
function getvalue(){
for(var i=0; i<oTable.cells.length; i++){
document.all["kc_name"+i].value = oTable.cells[i].innerHTML;
//alert(document.all["kc_name"+i].value)
}
}
document.onmouseup = function()
{
hideDiv();
var oTable = document.all.tb2;
for(var i=0; i<oTable.cells.length; i++)
oTable.cells[i].style.backgroundColor = normalColor;
}

document.onmousemove = function()
{
dragDiv();
}Top

25 楼Radar2006（中华英雄）回复于 2006-06-16 14:54:49 得分 10

</SCRIPT>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form name="Form1" method="post" action="WebForm11.aspx" id="Form1">
<table id="tb1" cellspacing="0" onMouseDown="showDiv('1')" onselectstart="return false;" border="0" style="width:200px;border-collapse:collapse;BORDER-RIGHT:black 1px solid; BORDER-TOP:black 1px solid; FONT-SIZE:13px; BORDER-LEFT:black 1px solid; BORDER-BOTTOM:black 1px solid">
<tr>
<td>语文</td>
</tr>
<tr>
<td>数学</td>
</tr>
<tr>
<td>英语</td>
</tr>
<tr>
<td>物理</td>
</tr>
<tr>
<td>化学</td>
</tr>
<tr>
<td>地理</td>
</tr>
<tr>
<td>生物</td>
</tr>
<tr>
<td>历史</td>
</tr>
<tr>
<td>政治</td>
</tr>
</table>
<TABLE style="BORDER-RIGHT:black 1px solid; BORDER-TOP:black 1px solid; FONT-SIZE:13px; BORDER-LEFT:black 1px solid; BORDER-BOTTOM:black 1px solid"
id="tb2" onMouseDown="showDiv('2')" onselectstart="return false;" cellpadding="0" cellspacing="1"
bordercolor="#ffccff" bgcolor="#999999" width="200">
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF"> 
</td>
</tr>
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF"> 
</td>
</tr>
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF"> 
</td>
</tr>
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF"> 
</td>
</tr>
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF"> 
</td>
</tr>
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF"> 
</td>
</tr>
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF"> 
</td>
</tr>
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF"> 
</td>
</tr>
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF"> 
</td>
</tr>
<input type="hidden" name="kc_name0" value="">
<input type="hidden" name="kc_name1" value="">
<input type="hidden" name="kc_name2" value="">
<input type="hidden" name="kc_name3" value="">
<input type="hidden" name="kc_name4" value="">
<input type="hidden" name="kc_name5" value="">
<input type="hidden" name="kc_name6" value="">
<input type="hidden" name="kc_name7" value="">
<input type="hidden" name="kc_name8" value="">
</TABLE>
<DIV id="tempDiv" onselectstart="return false" style="cursor:hand;position:absolute; border:1px solid black; background-color:#FFCCFF; display:none">
</DIV>
</form>
</body>
</HTML>
Top

26 楼cqhydz（混点分加个角）回复于 2006-06-16 17:20:05 得分 0

最好的例子当属宝玉老大做的关于netvibes的例子，的确不错是2005年netvibes网站的翻版
当然也是浏览器,只是他有点复杂
听说http://my.potu.com/也会有开源，但现在没消息了http://my.potu.com/就是抄netvibes的但做的不错，大家可以看看，我一直等它开源呢Top