分類:
JavaScript基本上msn、microsoft Live 和GOOGLE個(gè)性主頁(yè) 元素可拖動(dòng)并放置的的實(shí)現(xiàn)原理就是對(duì)DOM的操作再加上JAVASCRIPT拖動(dòng)元素。實(shí)現(xiàn)起來(lái)實(shí)際上并不難，但是要做到很美觀并符合用戶習(xí)慣就需要一些時(shí)間思考了。
以下代碼實(shí)現(xiàn)了上述功能，雖然很簡(jiǎn)單，但是基本上說(shuō)明了原理。實(shí)現(xiàn)更高級(jí)的功能當(dāng)然還需要改進(jìn)。
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>DropLayer2</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style type="text/css">
div
{
border-right: lightgrey thin solid;
border-top: lightgrey thin solid;
font-weight: bold;
z-index: 2;
text-transform: capitalize;
border-left: lightgrey thin solid;
color: white;
border-bottom: lightgrey thin solid;
background-color: dimgray;
}
</style>
</head>
<body>
<div id="parentDiv" class="parentCss" style="width:100">
<div class="itemCss" onmouseover="InsertDiv(this)">one 1</div>
<div class="itemCss" onmouseover="InsertDiv(this)">two 2</div>
<div class="itemCss" onmouseover="InsertDiv(this)">three 3</div>
<div class="itemCss" onmouseover="InsertDiv(this)">four 4</div>
<div class="itemCss" onmouseover="InsertDiv(this)">five 5</div>
<div class="itemCss" onmouseover="InsertDiv(this)">six 6</div>
<div class="itemCss" onmouseover="InsertDiv(this)">seven 7</div>
<div class="itemCss" onmouseover="InsertDiv(this)">eight 8</div>
<div class="itemCss" onmouseover="InsertDiv(this)">nine 9</div>
<div class="itemCss" onmouseover="InsertDiv(this)">ten 10</div>
</div>
<script language="javascript">
<!--
var obj,obj2; //引發(fā)事件對(duì)象
var rootNode; //控制對(duì)象根節(jié)點(diǎn)
var IsDrag=false; //是否抓起
var NullDiv; //空臨時(shí)層
var x,y; //鼠標(biāo)與控件的相對(duì)坐標(biāo)
window.onload = Prepare; //窗體加載時(shí)委托到Prepare
function Prepare()
{
//生成臨時(shí)層，并設(shè)置其屬性
NullDiv = document.createElement("div");
//獲得控制對(duì)象的根節(jié)點(diǎn)元素
rootNode = document.getElementById("parentDiv");
document.onmousemove=MoveIt; //當(dāng)鼠標(biāo)在文檔上移動(dòng)時(shí)事件委托到MoveIt
document.onmousedown=Drag; //當(dāng)鼠標(biāo)按下時(shí)事件委托到Drag
document.onmouseup=Release; //當(dāng)鼠標(biāo)釋放臺(tái)起時(shí)事件委托到Release
}
function Drag()
{
obj = event.srcElement;
x=0;//event.offsetX;
y=0;//event.offsetY;
obj.style.position='absolute';
obj.style.posTop=event.y-y;
obj.style.posLeft=event.x-x;
IsDrag=true;
}
function MoveIt()
{
//window.status = event.x+"|"+event.y+"|"+IsDrag+"|"+x+"|"+y;
if(IsDrag)
{
obj.style.posTop=event.y-y;
obj.style.posLeft=event.x-x;
}
}
function Release()
{
IsDrag=false;
NullDiv.style.display='none';
obj.style.position='';
rootNode.insertBefore(obj,obj2);
}
function InsertDiv(o)
{
if(IsDrag)
{
obj2=o;
NullDiv.style.display='';
NullDiv.style.height='18';
NullDiv.style.width='100';
rootNode.insertBefore(NullDiv,obj2);
}
}
//-->
</script>
</body>
</html>
TAG:
頁(yè)面效果
