在ajax中国看到这个网站http://www.start.com/

aimer311 2006-11-07 12:57:36

想知道主页面的模块框架拖动所用到的技术有哪些？对这个很感兴趣

...全文

374 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

jsnsoft 2006-11-13

打赏
举报

javascript,cookie,css,dom

这篇教程可以看看
http://www.pconline.com.cn/pcedu/empolder/wz/javascript/0607/830035.html

rg_nightkid 2006-11-13

打赏
举报

<td width="50%" id="td2">

<table border=0 class="dragTable" cellspacing="0">
<tr>
<td>asp.net</td>
</tr>
<tr>
<td id="div3"></td>
<tr>
</table>

<table border=0 class="dragTable" cellspacing="0">
<tr>
<td>C#.net</td>
</tr>
<tr>
<td id="div2" > </td>
<tr>
</table>

<table border=0 class="dragTable" cellspacing="0" id="td3" show="td3">
<tr>
<td>javascrip<a href="#" onClick="document.all.td3.style.display='none';document.all.td3.show='';show('td3');" onMouseDown="document.all.imag1.src='Icon2.gif'" onMouseUp="document.all.imag1.src='Icon.gif'" onFocus="this.blur()" ><img src="Icon.gif" width="16" height="14" id="imag1" border="0"></a></td>
</tr>
<tr>
<td id="dv" ><div id="div10" onClick="readrss('http://singlepine.cnblogs.com/category/37642.html/rss','dv');"></div></td>
<tr>
</table>

</td>
</tr>
</table>
<a href="#" onClick="div10.style.display='none'">隐藏</a>
</body>
</html>

rg_nightkid 2006-11-13

打赏
举报

rg_nightkid 2006-11-13

打赏
举报

这个也太慢了，你要是说个性化主页，那就是传说中的ajax。来段代码，自己感受吧
<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 src="xmlhttp.js" language="javascript" type="text/javascript"></script>
<script defer>
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);
obj=event.srcElement;
var t=obj.offsetTop - obj.parentElement.scrollTop;
var l=obj.offsetLeft - obj.parentElement.scrollLeft;
while(obj=obj.offsetParent){
t+=obj.offsetTop - obj.parentElement.scrollTop;
l+=obj.offsetLeft - obj.parentElement.scrollLeft;
}

//alert(event.srcElement.parentElement.tagName);
//alert(event.srcElement.previousSibling.tagName);
//alert(t+','+l);
//var aaa=event.srcElement.parentElement;
//alert(aaa.parentElement.tagName);
//第一个子标签为
//event.srcElement.firstChild
//最后个一个是
//event.srcElement.lastChild
//当然也可以用
//event.srcElement.children[i]
//event.srcElement.ChildNode[i]
//至于event.srcElement.parentElement是指在鼠标所在对象的上一个对象
var re='';
var tr = document.getElementById('tr');
var td1=tr.firstChild;
var td2=tr.lastChild;

for(var k=0; k<td1.childNodes.length; k++){

var table=td1.childNodes[k];
var tid=table.getAttribute('show');
re=re+'td1'+' '+k+' '+tid+';';
}
for(var k=0; k<td2.childNodes.length; k++){

var table=td2.childNodes[k];
var tid=table.getAttribute('show');
re=re+'td2'+' '+k+' '+tid+';';
}
re=re.substring(0,re.length-1);
//alert(re);
var kk='';
kk=re.split(';');
for(var i=0;i<kk.length;i++){
//alert(kk[i]);
}

}

aimer311 2006-11-13