`

MicroSoft Live 和GOOGLE个性主页 页面元素可拖拽放置的实现原理

MicrosoftGoogleJavaScriptCSSHTML 
阅读更多

<!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;//引发事件对象
var rootNode; //控制对象根节点

var IsDrag=false; //是否抓起

var NullDiv;//空临时层

var x,y;//鼠标与控件的相对坐标

window.onload = Prepare;//窗体加载时委托到Prepare

function Prepare()
{
//生成临时层，并设置其属性
NullDiv = document.createElement("div");

//获得控制对象的根节点元素
rootNode = document.getElementById("parentDiv");

document.onmousemove=MoveIt; //当鼠标在文档上移动时事件委托到MoveIt

document.onmousedown=Drag; //当鼠标按下时事件委托到Drag

document.onmouseup=Release; //当鼠标释放台起时事件委托到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>

<hr/>

分享到：
| 使用 Request.QueryString 接受参数时，跟 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics