仿Google和WindowsLive的拖拽_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:33:45

仿Google和WindowsLive的拖拽_javascript技巧

仿Google和WindowsLive的拖拽_javascript技巧: New Document body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alpha(opacity=30); } .normal { positio

推荐度：

点击下载本文 文档为doc格式

导读仿Google和WindowsLive的拖拽_javascript技巧: New Document body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alpha(opacity=30); } .normal { positio

<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 oncontextmenu="window.event.returnValue=false"> 
<input type="text" id="evt" name="eventValue" size="40" /> 
 
 
 <table width="100%"> 
 <tbody> 
 <tr bgcolor="#CCCCCC" bar="yes"><td>Cobao</td><td dragArea="yes" class="dragArea">........</td><td>- 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> 
 
 
 <table width="100%"> 
 <tbody> 
 <tr bgcolor="#CCCCCC" bar="yes"><td>新浪</td><td dragArea="yes" class="dragArea">........</td><td>- 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> 
 
 
 <table width="100%"> 
 <tbody> 
 <tr bgcolor="#CCCCCC" bar="yes"><td>网易</td><td dragArea="yes" class="dragArea">........</td><td>- 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> 
 
 
 <table width="100%"> 
 <tbody> 
 <tr bgcolor="#CCCCCC" bar="yes"><td>QQ</td><td dragArea="yes" class="dragArea">........</td><td>- x</td></tr> 
 <tr><td colspan="3">地址:http://www.qq.com</td></tr> 
 <tr><td colspan="3">关键字:</td></tr> 
 <tr><td colspan="3">说明:</td></tr> 
 </tbody> 
 </table>

</BODY> 
 
= 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); 
} 
//--> 
 
</HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

仿Google和WindowsLive的拖拽_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签： window javascript 拖动

热门焦点

仿Google和WindowsLive的拖拽_javascript技巧

仿Google和WindowsLive的拖拽_javascript技巧

仿Google和WindowsLive的拖拽_javascript技巧

最新推荐

猜你喜欢

热门推荐