Jquery 两个部门各占50%。使中间拖拽，使之变大或变小大家好，有没有办法让2个div占据屏幕的50%，中间有一个条，这样你就可以拖动它，使左40%和右60%，反之亦然。_Jquery_Html_Drag_Splitter

Jquery 两个部门各占50%。使中间拖拽，使之变大或变小大家好，有没有办法让2个div占据屏幕的50%，中间有一个条，这样你就可以拖动它，使左40%和右60%，反之亦然。

jquery html

Jquery 两个部门各占50%。使中间拖拽，使之变大或变小大家好，有没有办法让2个div占据屏幕的50%，中间有一个条，这样你就可以拖动它，使左40%和右60%，反之亦然。,jquery,html,drag,splitter,Jquery,Html,Drag,Splitter,我希望能够完成这个jquery。我没有一个完整的答案给你，但有一件事可能值得一看，那就是jquery的UI中的可调整大小的交互：这在很大程度上取决于您希望最终产品如何工作。您可能可以对其进行设置，使一个DIV可以调整大小，而相邻的一个DIV正好填补了这一空白。这可能有点过头了，这取决于您的应用程序UI还需要什么，但ExtJS在这方面做得非常好应该提到的另一个非常规选项是：框架集。框架是90年代中期的宠儿，但几乎每个浏览器都支持框架，没有太多麻烦。除了做css百分比，我会找到窗口的宽度，将其分

我希望能够完成这个jquery。

我没有一个完整的答案给你，但有一件事可能值得一看，那就是jquery的UI中的可调整大小的交互：

这在很大程度上取决于您希望最终产品如何工作。您可能可以对其进行设置，使一个DIV可以调整大小，而相邻的一个DIV正好填补了这一空白。

这可能有点过头了，这取决于您的应用程序UI还需要什么，但ExtJS在这方面做得非常好

应该提到的另一个非常规选项是：框架集。框架是90年代中期的宠儿，但几乎每个浏览器都支持框架，没有太多麻烦。

除了做css百分比，我会找到窗口的宽度，将其分成两半（减去条宽），并设置像素宽度。这使得移动条时更容易更改。

您所描述的内容通常被称为拆分器。从这一点来看，它似乎完全符合您的要求。

这里有一个我很快编写的方法，但它不使用jQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Slider</title>
<style type="text/css">
    #bar1 {
        position: absolute;
        background: red;
        height: 250px;
        width: 400px;
        z-index: 1;
    }

    #bar2 {
        position: absolute;
        background: green;
        height: 250px;
        width: 800px;
    }

    #slider {
        position: relative;
        background: blue;
        height: 100%;
        width: 10px;
        float: right;
    }
</style>

<script type="text/javascript">
    var down = false;
    var mouse_x;
    var interval;
    var IE = document.all?true:false

    if (!IE) document.captureEvents(Event.MOUSEMOVE)
    document.onmousemove = get_mouse_x;

    function get_mouse_x(e) {
        if (IE)
            mouse_x = event.clientX;
        else
            mouse_x = e.pageX;
    }

    function drag() {
        interval = setInterval("update()", 1);
    }

    function release() {
        clearInterval(interval);
    }

    function update() {
        if ((mouse_x - document.getElementById('bar1').offsetLeft) >= document.getElementById('bar2').offsetWidth) {
            release();
            document.getElementById('bar1').style.width = document.getElementById('bar2').offsetWidth + "px";
        } else if (mouse_x <= document.getElementById('bar1').offsetLeft) {
            release();
            document.getElementById('bar1').style.width = document.getElementById('bar1').offsetLeft + "px";
        } else {
            document.getElementById('bar1').style.width = (mouse_x - document.getElementById('bar1').offsetLeft) + "px";
    }
    }
</script>
</head>

<body onmouseup="javascript:release();">
    <div id="bar1">
        <div id="slider" onmousedown="javascript:drag();"> </div>
    </div>

    <div id="bar2"></div>
</body>
</html>


示例滑块
#bar1{
位置：绝对位置；
背景：红色；
高度：250px；
宽度：400px；
z指数：1；
}
#bar2{
位置：绝对位置；
背景：绿色；
高度：250px；
宽度：800px；
}
#滑块{
位置：相对位置；
背景：蓝色；
身高：100%；
宽度：10px；
浮动：对；
}
var-down=false；
var-mouse_x；
var区间；
var IE=文档。全部？真：假
if（！IE）document.captureEvents（Event.MOUSEMOVE）
document.onmousemove=get\u mouse\u x；
函数get_mouse_x（e）{
如果（即）
鼠标x=event.clientX；
其他的
鼠标x=e.pageX；
}
函数拖动（）{
间隔=设置间隔（“更新（）”，1）；
}
函数释放（）{
间隔时间；
}
函数更新（）{
if（（mouse_x-document.getElementById（'bar1'）.offsetLeft）>=document.getElementById（'bar2'）.offsetWidth）{
释放（）；
document.getElementById（'bar1'）。style.width=document.getElementById（'bar2'）。offsetWidth+“px”；
}否则如果（mouse_x这似乎适用于所有浏览器，我也可以更改一些内容，以便它使用jquery来缩短或增强它；如果需要的话。您可能希望禁用滑块分区内的选择。由于这是导致IE无法正确注册单击的原因，所以我认为这不是焦点问题。无论如何，很高兴这证明是有帮助的。另外，如果您想知道滑块的值（将其用作输入方法），那么可以使用以下方法检索该值：var value=（100*document.getElementById（'bar1'）。offsetWidth）/document.getElementById（'bar2'））.offsetWidth；演示在Chrome for Mac上失败，但这是可以理解的，因为这是发布此解决方案8年后的事。只是帮助其他人不要走错方向…这似乎与OP的问题无关。这以相同的方式调整两个div的大小，而不是以互补的方式相加以填充相同的宽度。