使用javascript拖动层

最新推荐文章于 2024-08-09 21:40:51 发布

xiaopin166

最新推荐文章于 2024-08-09 21:40:51 发布

阅读量94

点赞数

分类专栏： Javascript 文章标签： JavaScript XHTML HTML .net Blog ViewUI

本文链接：https://blog.youkuaiyun.com/xiaopin166/article/details/83489298

版权

Javascript 专栏收录该内容

6 篇文章

订阅专栏

转载参考地址：http://blog.youkuaiyun.com/qghboy/archive/2007/10/13/1823030.aspx

下面的代码你可以复制出去放到一个html文件里,运行测试一下

1.dom-drag.js文件代码:

var Drag = {

obj : null,

    init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
    {
        o.onmousedown    = Drag.start;

o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;

o.root = oRoot && oRoot != null ? oRoot : o ;

        if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left   = "0px";
        if (o.vmode && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
        if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
        if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

        o.minX    = typeof minX != 'undefined' ? minX : null;
        o.minY    = typeof minY != 'undefined' ? minY : null;
        o.maxX    = typeof maxX != 'undefined' ? maxX : null;
        o.maxY    = typeof maxY != 'undefined' ? maxY : null;

o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;

        o.root.onDragStart    = new Function();
        o.root.onDragEnd    = new Function();
        o.root.onDrag        = new Function();
    },

    start : function(e)
    {
        var o = Drag.obj = this;
        e = Drag.fixE(e);
        var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
        var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
        o.root.onDragStart(x, y);

o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;

        if (o.hmode) {
            if (o.minX != null)    o.minMouseX    = e.clientX - x + o.minX;
            if (o.maxX != null)    o.maxMouseX    = o.minMouseX + o.maxX - o.minX;
        } else {
            if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
            if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
        }

        if (o.vmode) {
            if (o.minY != null)    o.minMouseY    = e.clientY - y + o.minY;
            if (o.maxY != null)    o.maxMouseY    = o.minMouseY + o.maxY - o.minY;
        } else {
            if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
            if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
        }

document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;

return false;
},

    drag : function(e)
    {
        e = Drag.fixE(e);
        var o = Drag.obj;

        var ey    = e.clientY;
        var ex    = e.clientX;
        var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
        var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
        var nx, ny;

        if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
        if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
        if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
        if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)

        Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
        Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
        Drag.obj.lastMouseX    = ex;
        Drag.obj.lastMouseY    = ey;

        Drag.obj.root.onDrag(nx, ny);
        return false;
    },

    end : function()
    {
        document.onmousemove = null;
        document.onmouseup   = null;
        Drag.obj.root.onDragEnd(    parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
                                    parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
        Drag.obj = null;
    },

    fixE : function(e)
    {
        if (typeof e == 'undefined') e = window.event;
        if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
        if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
        return e;
    }
};

2.页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>移动的图层,并实现图层居上</title>
<script type="text/javascript">

        var div_z_index=1;
        function zIndexAdd(divId)
        {
            var divObject=document.getElementById(divId);

            div_z_index++;

            divObject.style.zIndex=div_z_index;

            //请注意：这里是 zIndex 千万不要写成 z-index 否则会出错的
        }
    </script>
</head>
<body>
    <div id="mydiv1" οnclick="zIndexAdd('mydiv1')" style="border: #000000 1px solid;width: 168px;height: 112px; background-color: #99ccff; position: absolute;">
    <div id="div11" style="background-color: #3366ff;cursor:move; width:100%;">点我移动图层</div>
    <div id="div12"><br/>我是内容,点我移不动</div>
    </div>

    <div id="mydiv2" οnclick="zIndexAdd('mydiv2')" style="border: #000000 1px solid;width: 168px;height: 112px; background-color: #ffcc33; position: absolute;">
    <div id="div21" style="background-color: #ff6600;cursor:move; width:100%;">标题</div>
    <div id="div22"><br/>我是内容,点那都可以移动</div>
    </div>

</body>
</html>

    var div_root=document.getElementById("mydiv1");
    var div_handle=document.getElementById("div11");
    Drag.init(div_handle,div_root); //可是是二个参数


    var div_root2=document.getElementById("mydiv2");
    Drag.init(div_root2); //也可以是一个参数

</script>