JavaScript拖拽（连载四）

拖拽时原层保持不动，复制一个内容层，运行代码看看。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>拖拽</title>
<style type="text/css">
body
{
    margin:0px;
}

#b
{
    width:100px;
    height:50px;
    border:1px solid #666666;
    background-color:#FFCCCC;
}

#nf, #f
{
    position:absolute;/*重要*/
    width:300px;
    height:50px;
    border:1px solid #666666;
    background-color:#CCCCCC;
    cursor:move;
}

.docked
{
    display:none;
    filter:alpha(opacity=100);
}

.actived
{
    display:block;
    filter:alpha(opacity=20);
}
</style>
</head>

<body >

<div id="b"></div>
<div id="nf" unselectable="on"><img src="http://www.cftea.com/images/logo.gif" alt="拖我">文字</div>
<div id="f" class="docked" unselectable="on"></div>

<script type="text/javascript" language="javascript">
<!--
//获得物件对象
var b = document.getElementById("b");
var nf = document.getElementById("nf");
var f = document.getElementById("f");

//配置物件位置
var b_orgnX = 0;
var b_orgnY = 0;
var f_orgnX = 200;
var f_orgnY = 0;

//设置物件位置
b.style.pixelLeft = b_orgnX;
b.style.pixelTop = b_orgnY;
nf.style.pixelLeft = f_orgnX;
nf.style.pixelTop = f_orgnY;
f.style.pixelLeft = f_orgnX;
f.style.pixelTop = f_orgnY;

//拖拽过程中相关变量
var draging = false; //是否处于拖拽中
var offsetX = 0;     //X方向左右偏移量
var offsetY = 0;     //Y方向上下偏移量

//准备拖拽
function BeforeDrag()
{
    if (event.button != 1)
    {
        return;
    }
    f.innerHTML = nf.innerHTML; //复制内容
    offsetX = document.body.scrollLeft + event.clientX-nf.style.pixelLeft;
    offsetY = document.body.scrollTop + event.clientY-nf.style.pixelTop;
    f.className = "actived";
    draging = true;
}

//拖拽中
function OnDrag()
{
    if(!draging)
    {
        return;
    }
    //更新位置
    event.returnValue = false;
    f.style.pixelLeft = document.body.scrollLeft + event.clientX-offsetX;
    f.style.pixelTop = document.body.scrollTop + event.clientY-offsetY;
}

//结束拖拽
function EndDrag()
{
    if (event.button != 1)
    {
        return;
    }
    draging = false;
    //f.className = "docked";这里得提到后面去
    if (f.style.pixelLeft>=b.style.pixelLeft && f.style.pixelLeft<=(b.style.pixelLeft+b.offsetWidth) &&
        f.style.pixelTop>=b.style.pixelTop && f.style.pixelTop<=(b.style.pixelTop+b.offsetHeight))
    {
        //拖拽块位于基块中，自动定位到基块位置
        nf.style.pixelLeft = b.style.pixelLeft;
        nf.style.pixelTop = b.style.pixelTop;
    }
    else
    {
        //拖拽块位于基块外，将拖拽块位置复原
        nf.style.pixelLeft = f_orgnX;
        nf.style.pixelTop = f_orgnY;
    }
    f.className = "docked";
}

nf.onmousedown = BeforeDrag;
document.onmousemove = OnDrag;
document.onmouseup = EndDrag;//使用document更保险
//-->
</script>
</body>

</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

ASP.NET 中的 AJAX	ASP.NET 画图全接触	ASP.NET 与 XML	声明式数据绑定	ASP.NET 网页抓取
C# 基础	C# 类教程	C# 加密	ASP.NET 成员资格	非“自动化”处理 Excel
QuickAjax	Ajax	完美的语法高亮器	Silverlight	Popfly