javascript - 使用滑动面板分隔符将 HTML 页面分成不同的部分？它是如何完成的？

Question

我想将网页划分为不同的部分，如此处所示。我试图弄清楚这种技术被称为什么以及实现它的有效方法？

该页面分为不同的部分，使用户可以使用面板手柄灵活地扩展和收缩不同的部分。

我假设这些不是常规框架（无论如何我都想避免使用）。

除了jsfiddle上的那个之外，有人知道那里的教程或很好的例子吗？

Answer 1

这个想法很简单。你用一些元素分解屏幕，给定高度的（比如div）并不重要。

然后将 onclick 事件附加到开始拖动的句柄。onclick 所做的是将 mousemove 事件附加到将调整元素大小的主体。

这是我不久前写的东西（在我的 jquery 时代之前），我相信它可以写得更好，你可能会找到一个插件，我不知道有一个：

function WidenHandle(widenedELement, handleElement, ondblClick, startWidth, withCoverDiv, onDrop)
{
    this.Handle = handleElement;
    this.IsClosed = false;
    this.Element = widenedELement;
    this.LastX = 0;
    this.LastY = 0;
    this.AttachedDragFunction = null;
    this.AttachedDropFunction = null;
    this.StartWidth = startWidth ? startWidth : 300;
    this.CoverDiv;
    this.OnDrop = onDrop;
    this.IsDragging = false;
    if (withCoverDiv)
    {
        var coverDiv = document.createElement("div");
        coverDiv.style.width = "2000px";
        coverDiv.style.height = "2000px";
        coverDiv.style.display = "none";
        coverDiv.style.position = "fixed";
        coverDiv.style.zIndex = "1000";
//        coverDiv.style.backgroundColor = "red";
//        coverDiv.style.opacity = "0.3";
        coverDiv.style.top = '0px';
        this.CoverDiv = coverDiv;
        document.body.appendChild(coverDiv);
    }

    if (this.Handle.addEventListener)
    {
        this.Handle.addEventListener("mousedown", function(element)
        {
            return function(event)
            {
                element.StartDragging(event);
                if (element.CoverDiv)
                    element.CoverDiv.style.display = "";
                if (event.preventDefault)
                    event.preventDefault();
          }
        } (this), true);

        this.Handle.addEventListener("dblclick", function(element)
        {
            return function(event)
            {
                element.Close(event);
                if (element.CoverDiv)
                    element.CoverDiv.style.display = "none";
                ondblClick(element);
            }
        } (this), true);
    }
    else
    {
        this.Handle.attachEvent("onmousedown", function(element)
        {
            return function(event)
            {
                element.StartDragging(event);
                if (element.CoverDiv)
                        element.CoverDiv.style.display = "";
                if (event.preventDefault)
                    event.preventDefault();
            }
        } (this));

        this.Handle.attachEvent("ondblclick", function(element)
        {
            return function(event)
            {
                element.Close(event);
                if (element.CoverDiv)
                    element.CoverDiv.style.display = "none";
                ondblClick(element);
            }
        } (this), true);
    }
}

WidenHandle.prototype.StartDragging = function(event)
{
    this.IsDragging = true;
    if (this.CoverDiv)
        this.CoverDiv.style.display = "none";
    this.ClearAttachedEvents();

    this.LastX = this.GetX(event);
    // ** attach mouse move and mouse up events to document ** //
    this.AttachedDragFunction = function(element)
    {
        return function(event)
        {
            element.OnDragging(event);
        }
    } (this);

    this.AttachedDropFunction = function(element)
    {
        return function(event)
        {
            element.OnDropping(event);
        }
    } (this);

    if (window.attachEvent) // ie
    {
        document.attachEvent('onmousemove', this.AttachedDragFunction);
        document.attachEvent('onmouseup', this.AttachedDropFunction);
    }
    else // ff
    {
        document.onmousemove = this.AttachedDragFunction;
        document.onmouseup = this.AttachedDropFunction;
    }
}
// ** for repositioning popup while dragging ** //
WidenHandle.prototype.OnDragging = function(event)
{
    clearHtmlSelection();
    this.WidenCell(event);
}

// ** for release popup movement when dropping ** //
WidenHandle.prototype.OnDropping = function(event)
{
    this.IsDragging = false;
    if (this.CoverDiv)
        this.CoverDiv.style.display = "none";

    this.ClearAttachedEvents();

    if (this.OnDrop)
        this.OnDrop();
}

WidenHandle.prototype.ClearAttachedEvents = function()
{
    // ** detach events from document ** //
    if (window.attachEvent) // ie
    {
        document.detachEvent('onmousemove', this.AttachedDragFunction);
        document.detachEvent('onmouseup', this.AttachedDropFunction);
    }
    else // ff
    {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}

WidenHandle.prototype.GetX = function(event)
{
    // ** return x position of mouse ** //
    var posx = 0;

    if (!event) event = window.event;
    if (event.pageX)
    {
        posx = event.pageX;
    }
    else if (event.clientX)
    {
        posx = event.clientX;
    }

    return posx;
}

WidenHandle.prototype.WidenCell = function(event)
{
    if (!this.Element.style.width)
        this.Element.style.width = this.Element.offsetWidth - 9 + "px";

    var width = parseInt(this.Element.style.width) + (this.GetX(event) - this.LastX);
    if (width > 13)
        this.Element.style.width = width + "px";

    // ** remember last mouse position ** //
    this.LastX = this.GetX(event);
}

WidenHandle.prototype.Close = function(event)
{
    var width = parseInt(this.Element.style.width);
    if (width < 30)
    {
        this.IsClosed = false;
        this.Element.style.width = "";
            return;
//        width = this.StartWidth;
    }
    else
    {
        width = 14;
        this.IsClosed = true;
    }
    this.Element.style.width = width + "px";
}

function clearHtmlSelection()
{
    var sel;
    if (document.selection && document.selection.empty)
    {
        document.selection.empty();
    }
    else if (window.getSelection)
    {
        sel = window.getSelection();
        if (sel && sel.removeAllRanges) sel.removeAllRanges();
    }
}