JavaScript拖拽（连载三）

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

关于图片拖拽的问题，我们在OnDrag函数中加入event.returnValue = false;就可以解决了，如下例：

<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"><img src="http://www.itpow.com/images/logo.gif" alt="拖我">文字</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;
    }
    //更新位置
    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))
    {
        //拖拽块位于基块中，自动定位到基块位置
        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