Ajax實現個人化網頁布局

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

實現施動的頁面：

<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);
    }
   }
}
}
}

</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>AJAX</td>
   </tr>
   <tr>
    <td id="div4"></td>
   <tr>
</table>
<table border=0 class="dragTable" cellspacing="0">
   <tr>
    <td>datagrid</td>
   </tr>
   <tr>
    <td id="div5"></td>
   <tr>
</table>
<table border=0 class="dragTable" cellspacing="0">
    <tr>
      <td>asp.net</td>
    </tr>
    <tr>
      <td id="div3"></td>
    <tr>
    </table></td>
<td width="25%">
<table border=0 class="dragTable" cellspacing="0">
   <tr>
    <td>C#.net</td>
   </tr>
   <tr>
    <td id="div2" > </td>
   <tr>
</table></td>
<td width="25%">
<table border=0 class="dragTable" cellspacing="0" id="td3">
   <tr>
    <td >javascrip</td>
   </tr>
   <tr>
    <td id="dv" ><div id="div10" ></div></td>
   <tr>
</table>
</td>
</tr>
</table>

</body>
</html>

頁面中調用的ＪＳ　xmlhttp.js

// JavaScript Document
function echo(obj1,html)
{
$(obj1).innerHTML=html;
}
function $(id)
{
return document.getElementById(id);
}
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function parseResults(obj1) {
var results = xmlHttp.responseXML;
var item = null;
var title;
var items = results.getElementsByTagName("item");
for(var i = 0; i < items.length; i++) {
item = items[i];
title = item.getElementsByTagName("title")[0].firstChild.nodeValue;
//clearPreviousResults();
link2=item.getElementsByTagName("link")[0].firstChild.nodeValue;
title=str(title);
addListRow(title,link2,obj1);
}
}

function readrss(url,obj)
{

createXMLHttpRequest()
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
//xmlHttp.abort();
function handleStateChange()
{
if(xmlHttp.readyState==2)
{
echo(obj,"正在提交資料，請稍等......");

}
else if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
//echo(obj,"正在提交資料，請稍等......");
clearPreviousResults(obj);
parseResults(obj);

}
}
}
}

function addListRow(test,link1,obj2)
{
//clearPreviousResults(obj2);
$(obj2).innerHTML+='<a href="'+link1+'" target="_blank" >'+test+'</a><br>';

}
function str(stri)
{
var strb;
if(stri.length>30)
{
strb=stri.substring(0,30)+'..';
}
else
{
strb=stri;
}
return strb;
}
function clearPreviousResults(obj3) {

while($(obj3).childNodes.length > 0) {
$(obj3).removeChild($(obj3).childNodes[0]);
}
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More