JavaScript拖拽（连载二）

作者：chilleen 来源：ITPOW 日期：2005-12-30

与前一版本比较，增加了如下内容：
只允许左键拖动；
拖动时透明度改变透明度；
鼠标指针变化；
不会选中层中的文字。
待解决的问题，无法正确拖动图片，有人说使用ondragstart、ondrag、ondragend，但实际有两个问题：无法拖动样式的鼠标指针，无法触发EndDrag函数。

<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;
}

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

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

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

<body >

<div id="b"></div>
<div id="f" class="docked" unselectable="on">文字</div>

<script type="text/javascript" language="javascript">
<!--
//获得物件对象
var b = document.getElementById("b");
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;
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;
    }
    offsetX = document.body.scrollLeft + event.clientX-f.style.pixelLeft;
    offsetY = document.body.scrollTop + event.clientY-f.style.pixelTop;
    f.className = "actived";
    draging = true;
}

//拖拽中
function OnDrag()
{
    if(!draging)
    {
        return;
    }
    //更新位置
    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))
    {
        //拖拽块位于基块中，自动定位到基块位置
        f.style.pixelLeft = b.style.pixelLeft;
        f.style.pixelTop = b.style.pixelTop;
    }
    else
    {
        //拖拽块位于基块外，将拖拽块位置复原
        f.style.pixelLeft = f_orgnX;
        f.style.pixelTop = f_orgnY;
    }
}

f.onmousedown = BeforeDrag;
document.onmousemove = OnDrag;
f.onmouseup = EndDrag;
//-->
</script>
</body>

</html>

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

电邮：cftea@126.com