层拖动

最新推荐文章于 2019-02-01 21:06:18 发布

转载最新推荐文章于 2019-02-01 21:06:18 发布 · 495 阅读

文章标签：

#function #div #server #null

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

一个使层可以拖动的JS函数，使其在外观上类似窗体，代码如下:
function Drag()
{
    var obj, ox, oy;
    function startDrag(e)
    {
        var e = window.event || e;
        obj = this.root;
        ox = e.clientX - obj.offsetLeft;
        oy = e.clientY - obj.offsetTop;
        document.onmousemove = moveDrag;
        document.onmouseup = stopDrag;
    }
    function moveDrag(e)
    {
        var e = window.event || e;
        obj.style.left = e.clientX - ox + "px";
        obj.style.top = e.clientY - oy + "px";
    }
    function stopDrag()
    {
        document.onmousemove = document.onmouseup = null;
    }
    this.add = function (o, root)
    {
        o.root = root;
        o.onmousedown = startDrag;
    };
}
例如定义以下层:
    <div id="Div_Add" style="z-index: 101; left: 318px; background-color:White;
        width: 404px; position: absolute; top: 125px; height: 175px">
        <div id="Div_Head" align="right" style="width: 100%; text-align: justify; background-color:Blue;
            vertical-align: middle;">
            <asp:Label runat="server" ID="divHeadMsg" Text="标题" Width="387px" Height="1px" />
        </div>
        <label>正文部分</label>
    </div>
可以在页面初始化时调用
new Drag().add(document.all.Div_Head,document.all.Div_Add);
使层可以拖动