AJAX简单实现新闻拖放系统

javascript代码: .DivTop { text-align:left; } <script type="text/javascript"> function init() { //左边的新闻 var NewsIdss=NewsDrop.NewsID("Left").value; var NewsIds=NewsIdss.split("|"); for(var i=0;i<NewsIds.length-1;i++) { if(NewsIds[i] !=null) { var NewsContent=""; var NewsId=NewsIds[i] var NewsTitle=NewsDrop.NewsTitle(NewsId).value; var NewsContentss=NewsDrop.NewsContent(NewsId).value; var NewsContents=NewsContentss.split("|"); for(var j=0;j<NewsContents.length-1;j++) { if(NewsContents[j]!=null) { NewsContent +=NewsContents[j]; } } } var div = InitialDiv(NewsId,NewsTitle,NewsContent); document.getElementById("Left").appendChild(div); } //中间的新闻 var CenterNewsIdss=NewsDrop.NewsID("Center").value; var CenterNewsIds=CenterNewsIdss.split("|"); for(var i=0;i<CenterNewsIds.length-1;i++) { if(CenterNewsIds[i] !=null) { var CenterNewsContent=""; var CenterNewsId=CenterNewsIds[i] var CenterNewsTitle=NewsDrop.NewsTitle(CenterNewsId).value; var CenterNewsContentss=NewsDrop.NewsContent(CenterNewsId).value; var CenterNewsContents=CenterNewsContentss.split("|"); for(var j=0;j<CenterNewsContents.length-1;j++) { if(CenterNewsContents[j]!=null) { CenterNewsContent +=CenterNewsContents[j]; } } } var div = InitialDiv(CenterNewsId,CenterNewsTitle,CenterNewsContent); document.getElementById("Center").appendChild(div); } //右边的新闻 var RightNewsIdss=NewsDrop.NewsID("Right").value; var RightNewsIds=RightNewsIdss.split("|"); for(var i=0;i<RightNewsIds.length-1;i++) { if(RightNewsIds[i] !=null) { var RightNewsContent=""; var RightNewsId=RightNewsIds[i] var RightNewsTitle=NewsDrop.NewsTitle(RightNewsId).value; var RightNewsContentss=NewsDrop.NewsContent(RightNewsId).value; var RightNewsContents=RightNewsContentss.split("|"); for(var j=0;j<RightNewsContents.length-1;j++) { if(RightNewsContents[j]!=null) { RightNewsContent +=RightNewsContents[j]; } } } var div = InitialDiv(RightNewsId,RightNewsTitle,RightNewsContent); document.getElementById("Right").appendChild(div); } } function InitialDiv(id,title,content) { var all="all"+id; var top="top"+id; var bottom="bottom"+id; var div=document.createElement("div"); var divTop=document.createElement("div"); var divBottom=document.createElement("div"); divTop.innerHTML=title; divBottom.innerHTML=content; div.setAttribute("id",all); div.style.width="300px"; div.attachEvent("ondrag",draging); div.attachEvent("ondragend",dragEnd); divTop.setAttribute("class","DivTop"); divTop.style.border = "1px solid #ccc"; divTop.setAttribute("id",top); divTop.style.background = "#ff66cc"; divTop.style.height = "25px"; divTop.style.textAlign="left"; divTop.style.cursor="move"; divTop.attachEvent("onmousedown",dragStart); divBottom.setAttribute("class","DivTop"); divBottom.style.border = "1px solid #ccc"; divBottom.setAttribute("id",bottom); divBottom.style.textAlign="left"; divBottom.style.height = "150"; div.appendChild(divTop); div.appendChild(divBottom); return div; } function getdashed() { var dashedDiv=document.createElement("div"); dashedDiv.style.width="300px"; dashedDiv.style.height="175px"; dashedDiv.style.border="1px dashed #ccc"; dashedDiv.setAttribute("id","dashedDiv"); return dashedDiv; } var draged=false; var tdiv=null; var aoo=null; var aooo=null; function dragStart() { var ao=event.srcElement; if(ao.tagName.toLowerCase()=='div') { aoo=ao.parentElement; aooo=aoo.parentElement; } else { return; } draged=true; tdiv=document.createElement("div"); //tdiv=ao.parentElement; tdiv.innerHTML=ao.outerHTML; tdiv.style.display="block"; tdiv.style.position="absolute"; tdiv.style.filter="alpha(opacity=50)"; 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{ aoo.dragDrop(); }catch(e){} } function draging() { //debugger 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; var divLeft=getInfo(document.getElementById("Left")); var divCenter=getInfo(document.getElementById("Center")); var divRight=getInfo(document.getElementById("Right")); if(tX<=divLeft.right) { document.getElementById("Left").appendChild(aoo); } else if(tX>divLeft.right&&tX<=divCenter.right) { document.getElementById("Center").appendChild(aoo); } else if(tX>divCenter.right) { document.getElementById("Right").appendChild(aoo); } } function dragEnd() { //debugger 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.parentElement; } 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(aoo).left)/ab; var af=(ad-getInfo(aoo).top)/ab; return setInterval(function(){if(ab<1) { clearInterval(mm); tdiv.removeNode(true); aoo=null; return } ab--; ac-=ae; ad-=af; tdiv.style.left=parseInt(ac)+"px"; tdiv.style.top=parseInt(ad)+"px" } ,aa/ab) } </script>

c#代码: using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using Ajax; public partial class NewsDrop : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Ajax.Utility.RegisterTypeForAjax(typeof(NewsDrop)); } [Ajax.AjaxMethod()] public string NewsID(string location) { DB dv = new DB(); return dv.getNewsID(location); } [Ajax.AjaxMethod()] public string NewsTitle(int id) { DB dv = new DB(); return dv.getNewsTitle(id); } [Ajax.AjaxMethod()] public string NewsContent(int Id) { DB dv = new DB(); return dv.getNewsContent(Id); } }