订阅 | 上一篇 | 下一篇 技术:新知笔记 仿Google和Windows Live的拖拽 作者:尤来尤去 日期:2006-10-31 字体大小: 小 中 大 仿Google和Windows Live的拖拽 转自 经典论坛,转摘请注明出处! 效果演示: http://www.google.com/ig http://www.live.com 代码如下: HTML代码 <HTML> <HEAD> <TITLE> New Document </TITLE> <style type="text/css"> body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alpha(opacity=30); } .normal { position:absolute;/*重要*/ width:300px; #height:10px; border:1px solid #666666; background-color:#FFFFFF; } .over { position:absolute;/*重要*/ width:300px; #height:10px; border:1px solid #666666; background-color:#f3f3f3; filter: alpha(opacity=50); } .dragArea { CURSOR: move; } </style> </HEAD> <BODY οncοntextmenu="window.event.returnValue=false"> <input type="text" id="evt" name="eventValue" size="40" /> <div id="dragHelper" style="display:none"></div> <div class="normal" overClass="over" dragClass="normal"> <table width="100%"> <tbody> <tr bgcolor="#CCCCCC" bar="yes"><td><a href="#">Cobao</a></td><td dragArea="yes" class="dragArea">........</td><td><a href="#" οnclick="openClose(this)">-</a> x</td></tr> <tr><td colspan="3">地址:http://www.cobao.cn</td></tr> <tr><td colspan="3">关键字:</td></tr> <tr><td colspan="3">说明:</td></tr> </tbody> </table> </div> <div class="normal" overClass="over" dragClass="normal"> <table width="100%"> <tbody> <tr bgcolor="#CCCCCC" bar="yes"><td>新浪</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" οnclick="openClose(this)">-</a> x</td></tr> <tr><td colspan="3">地址:http://www.sina.com.cn</td></tr> <tr><td colspan="3">关键字:</td></tr> <tr><td colspan="3">说明:</td></tr> </tbody> </table> </div> <div class="normal" overClass="over" dragClass="normal"> <table width="100%"> <tbody> <tr bgcolor="#CCCCCC" bar="yes"><td><a href="http://www.dzhai.com/goto.asp?url=http://www.163.com" target="_blank">网易</a></td><td dragArea="yes" class="dragArea">........</td><td><a href="#" οnclick="openClose(this)">-</a> x</td></tr> <tr><td colspan="3">地址:http://www.163.com</td></tr> <tr><td colspan="3">关键字:</td></tr> <tr><td colspan="3">说明:</td></tr> </tbody> </table> </div> <div class="normal" overClass="over" dragClass="normal"> <table width="100%"> <tbody> <tr bgcolor="#CCCCCC" bar="yes"><td><a href="http://www.dzhai.com/goto.asp?url=http://www.qq.com/" target="_blank">QQ</a></td><td dragArea="yes" class="dragArea">........</td><td><a href="#" οnclick="openClose(this)">-</a> x</td></tr> <tr><td colspan="3">地址:http://www.<a href="http://www.dzhai.com/goto.asp?url=http://www.qq.com/" target="_blank">qq</a>.com</td></tr> <tr><td colspan="3">关键字:</td></tr> <tr><td colspan="3">说明:</td></tr> </tbody> </table> </div> </BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- var dragObjs = []; //可以拖拽的元素数组 var dragObjTops = []; var dragHelper = document.getElementById("dragHelper"); //拖拽时位置框 var dragObj = null; //拖拽对象元素 var dragObjPos = 0; var dragObjOffset = {left:0,top:0}; //拖拽对象原始位置 var mouseInDragObjOffset = {x:0,y:0}; //鼠标在拖拽对象中的相对位置 var initHeight = 40; Number.prototype.NaN0=function(){return isNaN(this)?0:this;} function getPosition(e){ //获取元素相对文档的绝对位置 var left = 0; var top = 0; while (e.offsetParent){ left += e.offsetLeft; top += e.offsetTop; e = e.offsetParent; } left += e.offsetLeft; top += e.offsetTop; return {x:left, y:top}; } function mouseCoords(ev){ //获取鼠标相对文档的绝对位置 if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } function getMouseOffset(target, ev){ // 获取鼠标相对元素的相对位置 ev = ev || window.event; var elementPos = getPosition(target); var mousePos = mouseCoords(ev); return {x:mousePos.x - elementPos.x, y:mousePos.y - elementPos.y}; } function mouseDown(ev){ ev = ev || window.event; target = ev.srcElement || ev.target; if(dragObj){ return; } var dragArea = false; if(target.getAttribute("dragArea")){ dragArea = true; } while(!target.getAttribute("isDragObj")){ if(target.tagName=="HTML") break; target = target.parentNode; } if(dragArea && target.getAttribute("isDragObj")){ dragObj = target; //重写的目的是让当前对象在最上层 document.body.removeChild(dragObj); document.body.appendChild(dragObj); //记录下拖拽对象原始位置 dragObjOffset.left = dragObj.style.left; dragObjOffset.top = dragObj.style.top; dragObj.className = dragObj.getAttribute("overClass"); //鼠标在拖拽对象中的相对位置 mouseInDragObjOffset = getMouseOffset(dragObj, ev); dragHelper.style.left = dragObj.style.left; dragHelper.style.top = dragObj.style.top; dragHelper.style.width = dragObj.offsetWidth; dragHelper.style.height = dragObj.offsetHeight; dragHelper.style.display = ""; //alert(dragObj.offsetWidth+":"+dragObj.clientWidth); } } function mouseUp(ev){ ev = ev || window.event; target = ev.srcElement || ev.target; if(dragObj){ dragObj.style.left = dragHelper.style.left; dragObj.style.top = dragHelper.style.top; dragHelper.style.display = "none"; dragObj.className = dragObj.getAttribute("dragClass"); dragObj = null; } } function mouseMove(ev){ ev = ev || window.event; if(dragObj) { var mousePos = mouseCoords(ev); /*dragHelper.style.left = dragObjOffset.left; dragHelper.style.top = dragObjOffset.top; dragHelper.style.width = dragObj.offsetWidth; dragHelper.style.height = dragObj.offsetHeight; dragHelper.style.display = "";*/ var windowWidth = document.body.offsetWidth; //窗口宽度 var windowHeight = document.body.offsetHeight; //窗口高度 //拖拽对象应该所在当前位置 var dragObjLeft = mousePos.x - mouseInDragObjOffset.x; var dragObjTop = mousePos.y - mouseInDragObjOffset.y; //增加判断,不然拖拽对象拖出浏览器窗口 if(dragObjLeft >= 0 && dragObjLeft <= windowWidth - dragObj.offsetWidth - 20) dragObj.style.left = dragObjLeft; if(dragObjTop >=0) dragObj.style.top = dragObjTop; repaint(); } } //克隆对象 function cloneObject(srcObj, destObj){ destObj = srcObj.cloneNode(true); } function makeDraggable(element){ element.setAttribute("isDragObj", "y"); } function repaint(){ for(i=0; i<dragObjs.length; i++){ if(dragObjs[i] == dragObj){ dragObjPos = i; dragObjs[i] = dragHelper; break; } } if(dragObjPos>0 && parseInt(dragObj.style.top)<parseInt(dragObjs[dragObjPos-1].style.top)){ dragObjs[dragObjPos] = dragObjs[dragObjPos-1]; dragObjs[dragObjPos-1] = dragHelper; dragObjPos = dragObjPos - 1; } if(dragObjPos<dragObjs.length-1 && parseInt(dragObj.style.top)>parseInt(dragObjs[dragObjPos+1].style.top)){ dragObjs[dragObjPos] = dragObjs[dragObjPos+1]; dragObjs[dragObjPos+1] = dragHelper; dragObjPos = dragObjPos + 1; } paintDragObjs(); dragObjs[dragObjPos] = dragObj; } function paintDragObjs(){ var h = 40; for(i=0; i<dragObjs.length; i++){ dragObjs[i].style.left = 20; dragObjs[i].style.top = h; h += dragObjs[i].offsetHeight + 10; } } function openClose(obj){ obj.innerHTML = obj.innerHTML=="-"?"+":"-"; while(obj.tagName != "TBODY"){ obj = obj.parentNode; } for(i=0; i<obj.childNodes.length; i++){ if(obj.childNodes[i].nodeName == "#text" || obj.childNodes[i].getAttribute("bar")){ continue; } obj.childNodes[i].style.display=obj.childNodes[i].style.display==""?"none":""; } paintDragObjs(); } document.onmousedown = mouseDown; document.onmouseup = mouseUp; document.onmousemove = mouseMove; window.onload = function(){ var objs = document.getElementsByTagName("Div"); for(i=0; i<objs.length; i++){ var item = objs.item(i); //if(i==1)item.style.height=150; if(item.getAttribute("overClass")){ makeDraggable(item); dragObjs.push(item); item.style.left = 20; item.style.top = initHeight; dragObjTops.push(initHeight); initHeight += item.offsetHeight + 10; } } // dragHelper = document.createElement('DIV'); // dragHelper.style.cssText = 'position:absolute;display:none;'; // document.body.appendChild(dragHelper); } //--> </SCRIPT> </HTML> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] HTML代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title><a href="http://www.dzhai.com/goto.asp?url=http://www.google.com" target="_blank">Google</a>个性化主页拖搁功能(不包含保存功能)</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> *{padding:0;margin:0} body{font-family:Verdana,sans-serif;font-size:.7em;line-height:1.5em;margin:0; text-align:center;} h3{ display:block; margin:10px; text-align:left; width:90%;} h3 a{color:#3169b5;} #Copy{border-top:#edf2fb 2px solid; width:90%; text-align:left; color:#666666;} #Copy a{color:#3169b5; text-decoration:none;} .dragTable{ border-top:1px solid #3366cc; margin-bottom: 10px; width:100%; background-color:#FFFFFF; } td{vertical-align:top; } ul{ padding:0; margin:0; list-style:none; } li{ line-height:120%; color:#3169b5; } .dragTR{ cursor:move; color:#7787cc; text-decoration:underline; background-color:#e5eef9; padding:10px 0 10px 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.οnmοusemοve=Drag.draging; document.οnmοuseup=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> <div><h3><a href="http://www.syosyume.com">Syosyume's Blog</a></h3> </div> <table border="0" cellpadding="0" cellspacing="10" width="100%" id="parentTable"> <tr > <td width="25%" valgin="top"> <table border=0 class="dragTable" cellspacing="0"> <tr> <td><b>GMAIL</b></td> </tr> <tr> <td> <ul> <li>·Ajax: A New Approach to Web Applications</li> <li>·Ajax: A New Approach to Web Applications</li> </ul> </td> <tr> </table> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>Sport</td> </tr> <tr> <td> <ul> <li>·Ajax: A New Approach to Web Applications</li> <li>·Ajax: A New Approach to Web Applications</li> </ul> </td> <tr> </table> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>News</td> </tr> <tr> <td> <ul> <li>·Ajax: A New Approach to Web Applications</li> <li>·Ajax: A New Approach to Web Applications</li> </ul> </td> <tr> </table> </td> <td width="25%"> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>Weather</td> </tr> <tr> <td> <ul> <li>·Ajax: A New Approach to Web Applications</li> <li>·Ajax: A New Approach to Web Applications</li> </ul> </td> <tr> </table> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>Women</td> </tr> <tr> <td> <ul> <li>·Ajax: A New Approach to Web Applications</li> <li>·Ajax: A New Approach to Web Applications</li> </ul> </td> <tr> </table> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>Man</td> </tr> <tr> <td> <ul> <li>·Ajax: A New Approach to Web Applications</li> <li>·Ajax: A New Approach to Web Applications</li> </ul> </td> <tr> </table> </td> <td width="25%"> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>Polity</td> </tr> <tr> <td> <ul> <li>·Ajax: A New Approach to Web Applications</li> <li>·Ajax: A New Approach to Web Applications</li> </ul> </td> <tr> </table> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>My Ajax</td> </tr> <tr> <td> <ul> <li>·Ajax: A New Approach to Web Applications</li> <li>·Ajax: A New Approach to Web Applications</li> </ul> </td> <tr> </table> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>My Ajax</td> </tr> <tr> <td> <ul> <li>·Ajax: A New Approach to Web Applications</li> <li>·Ajax: A New Approach to Web Applications</li> </ul> </td> <tr> </table> </td> </tr> </table> <div id="Copy">©2006 Syosyume │<a href="http://www.syosyume.com"> Blog</a>│ <a href="http://www.syosyume.com/photo">Photo</a></div> </body> </html> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]