div划分比例的问题

问题：
我的div总宽度是400
1、把最右边一条线拖到最右边，显示385
2、如果去掉<div id="c3" class="columns" style="background-color:yellow; left: 300px"></div>，把最右边一条线拖到最右边，显示的是390
3、如果去掉<div id="c2" class="columns" style="background-color:red; left: 200px"></div> <div id="c3" class="columns" style="background-color:yellow; left: 300px"></div>，把最右边一条线拖到最右边，显示的是395 （这个是算上了线的宽度，还好理解，算正常，上面2种情况不知道怎么回事，多一条线就多5个像素）
1、我限制了线与线之间的间距像素为5，但调来调去不是那么回事，有时多些，好像10个像素，有时好像5个像素。往右拖第二条线，还可以靠在一起，没有5个像素的间距

也许还有其他问题，感觉不太爽
网上除了slider滑块，类似的多个的好像没有，我了没思路。cursor:pointer和cursor:e-resize，这不是问题，至时随便用哪一个问题是我上面说的，比较严重，有没有办法解决？？

应该是你的
if( typeof $(this).prev().attr('id') == "string" ){
                        if( ui.position.left <= $(this).prev().position().left + $(this).prev().width() + 5  ){
                            ui.position.left = $(this).prev().position().left + $(this).prev().width() + 5;
                        }
                    }
                    if( typeof $(this).next().attr('id') == "string" ){
                        if( ui.position.left >= $(this).next().position().left - $(this).width() - 5 ){
                            ui.position.left = $(this).next().position().left - $(this).width() - 5 ;
                        }
                    }应该这里的运算问题
对JQ不是太了解

to chinmo：
应该这里的运算问题
对JQ不是太了解------------------
一样的代码，第一条线好像没问题，主要是第二条线可以与第三条靠在一起了，代码都是一样的呀？

你那个判断有问题
改成这样你就会发现少了几个判断了
if( typeof $(this).prev().attr('id') == "string" ){
                        if( ui.position.left <= $(this).prev().position().left + $(this).prev().width() - 5  ){
                            ui.position.left = $(this).prev().position().left + $(this).prev().width() - 5;
                       }
                    }
                    if( typeof $(this).next().attr('id') == "string" ){
                        if( ui.position.left >= $(this).next().position().left - $(this).width() - 5 ){
                            ui.position.left = $(this).next().position().left - $(this).width() - 5 ;
                        }
                    }
这样以后，你看，往中间拖的时候都是正好隔5个像素，解决了你往中间拖的时候红色和黄色间隔超过5像素的问题
但是往左边还是往右边拖的时候还是有2个贴在一起了
所以还得分几种情况来判断

你是不是要做WEB上的Splitpane啊。我现在在公司正好做到这个。http://xianshibian.bplaced.net/study_js/version00_yuibeispiel/splitpane.htmlhttp://xianshibian.bplaced.net/study_js/splitpane-yui/4-nested_autostyle.html还有ＢＵＧ，不过大部份时间都是好的。如果有兴趣我们可以探讨一下。

楼主的意思是用百分比来控制div的布局和大小吗

to chinmo:
还是没明白你的意思，也不知道我上面代码问题出在哪。
代码是指定这些线条在id=container容器中拖动，限制横向拖。
在drag事件中，typeof $(this).prev().attr('id') == "string"是判断左边有没有线条，如果有要人为控制隔点距离(5px)，同理typeof $(this).next().attr('id') == "string"也一样
所以其他的我觉得不用控制但确实存在问题。to ubunte12:
确实类似Splitpane，你给的网址打开是广告呀，没啥效果呀？
欢迎你指点。

to yate123、shihuaxian123：
是这个意思，一个设置页面，让用户控制div为两列或者三列或者N列，然后调整各列之间的比例大小，再保存比例数据。
然后在另一个页面要根据这个设置是定了多少列，各列的比例对页面或区域布局。

开始我想用slider做，但一些slider的例子都是一分为二的，分三列、N列的没看到。

http://www.methvin.com/jquery/splitter/
这儿有一个，不过他的demo中三栏的，后面两栏又要包含在一个div下。我试了没达到我的要求
明天继续看，看能不能实出来或借鉴下..

to chinmo：
同意你上面说的，改成你的#22楼问题确实存在，#23楼，我的那个问题也存在，问题还是没解决。我觉得我的计算没问题，就是在拖动时
如果当前位置 <= 左边线条的位置+左边线条宽度+5(保持5px间距)，就限制在左边线条相隔的5px位置
如果当前位置 >= 右边线条的位置-当前线条的宽度-5(保持5px间距)，就限制在右边线条相隔的5px位置

这个可以解决问题<!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> new document </title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>    <style>
    .ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
    .ui-resizable { position: relative;}
    .ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
    .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
    .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
    .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
    .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
    .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
    .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
    .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
    .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
    .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
    </style>
  <script>
    $(function() {
        $(".columns").draggable({ containment: '#container', axis: 'x',
            drag: function(event, ui) {

                    if( typeof $(this).prev().attr('id') == "string" ){
                        if( ui.position.left <= $(this).prev().position().left  + 5  ){
if($(this).prev().attr('id') == "c1"){
ui.position.left = $(this).prev().position().left + 5;
}
if($(this).prev().attr('id') == "c2"){
ui.position.left = $(this).prev().position().left - $(this).prev().width() + 5;
}
                        }
                    }
                    if( typeof $(this).next().attr('id') == "string" ){
                        if( ui.position.left >= $(this).next().position().left- 15 ){ if($(this).next().attr('id') == "c2"){
ui.position.left = $(this).next().position().left - $(this).width() - 5;
}
if($(this).next().attr('id') == "c3"){
ui.position.left = $(this).next().position().left - $(this).width()-$(this).prev().width()-5 ;
}
                        }
                    }

                    $('#msg').html( ui.position.left )            }
        });
    });
  </script>
  <style>
    #container{
        height:200px;
        width:430px;
        border:1px solid #ccc;
        position: absolute;

    }
    .columns{
        background-color:blue;
        width:10px;
        height:100%;
        float:left;
        cursor:pointer;
    }
    .last{
        border-right:1px solid #ccc;
    }
  </style>
</head> <body>
<div id="msg"></div> <div id="container">
  <div id="c1" class="columns" style="left: 100px;"></div>
  <div id="c2" class="columns" style="background-color:red; left: 200px"></div>
  <div id="c3" class="columns" style="background-color:yellow; left: 300px"></div>
  </div>
</div> </body>
</html>
为了便与发现问题，这里我把DIV宽度设置为10，把#container宽度就要设置为430，因为三个DIV占用了30像素。这里要注意的是，在计算left的时候，需要忽略掉本身以前前面DIV的宽度
这个忽略是说，DIV本身占用了#container的空间，而DIV在移动的时候却用忽略了本身的宽度你可要试着去掉相隔5个像素的限制，当两个DIV之间距离为0时，他们显示的刻度确实一样的，这说明DIV肯定忽略了本身的宽度

我换了一个地址，你看看呢
http://www.uni-ulm.de/~s_jwu1/4-nested_autostyle.html

计算肯定有问题的
我今天太忙，没把我改的代码发出来，一开始我就说了少了判断：<script>
    $(function() {
        $(".columns").draggable({ containment: '#container', axis: 'x',
            drag: function(event, ui) {
if(  $(this).attr('id') == "c1" ){
                    if( typeof $(this).prev().attr('id') == "string" ){
                        if( ui.position.left <= $(this).prev().position().left + $(this).prev().width() - 5  ){
                            ui.position.left = $(this).prev().position().left + $(this).prev().width() - 5;
                        }
                    }
                    if( typeof $(this).next().attr('id') == "string" ){
                        if( ui.position.left >= $(this).next().position().left - $(this).width() - 5 ){
                            ui.position.left = $(this).next().position().left - $(this).width() - 5 ;
                        }
                    }

                    $('#msg').html( ui.position.left )
}
if(  $(this).attr('id') == "c2" ){
                    if( typeof $(this).prev().attr('id') == "string" ){
                        if( ui.position.left <= $(this).prev().position().left +5  ){
                            ui.position.left = $(this).prev().position().left +5;
$('#msg3').html( $(this).prev().position().left )
$('#msg1').html( $(this).prev().width()+1 )
                        }
                    }
                    if( typeof $(this).next().attr('id') == "string" ){
                        if( ui.position.left >= $(this).next().position().left - $(this).width() -  10 ){
                            ui.position.left = $(this).next().position().left - $(this).width() - 10 ;
                        }
                    }

                    $('#msg').html( ui.position.left )
}
if(  $(this).attr('id') == "c3" ){
                    if( typeof $(this).prev().attr('id') == "string" ){
                        if( ui.position.left <= $(this).prev().position().left + $(this).prev().width() - 5  ){
                            ui.position.left = $(this).prev().position().left + $(this).prev().width() - 5;
                        }
                    }
                    if( typeof $(this).next().attr('id') == "string" ){
                        if( ui.position.left >= $(this).next().position().left - $(this).width() - 5 ){
                            ui.position.left = $(this).next().position().left - $(this).width() - 5 ;
                        }
                    }

                    $('#msg').html( ui.position.left )
}            }
        });
    });
  </script>
就你目前的代码用这个JS肯定没问题，在IE6下，别的还没测试

to xianshibian：
  你的效果不错，但我不需要那么复杂，就一个div划分几列，调整各列的比例就行。
  你的是yahoo api封装的，估计我用不了，到时参考下。to chinmo:
  谢谢你多次回复，我明天试一下，不过你这多判断是不是麻烦点，我要做的这个实例可能是2列，可能是3列，或是N列，到时判断起来就麻烦了。先Mark下，明天验证上面的回复

看看这样是不是符合你要求？
只是简单的写了写，既没做兼容，也没考虑容错，就是个思路。IE6下测了下而已。
<!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> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script>
var bInDrag = false,currentID=-1,n=0;
function $(id){ return document.getElementById(id);}
function initDrag(o) {
  bInDrag = true;
  currentID=o.id.replace('c','')*1//判断当前点击的是哪一个分隔条，便于拖动时判断区间
  o.setCapture();
}
function freeDrag(o) { bInDrag = false; o.releaseCapture();}
function doDrag(o,e) {
  if (!bInDrag||currentID==-1) {return;}
  e=e||window.event;
  var mX=document.all?e.clientX:e.pageX;
  var t=0,d=mX - $('container').offsetLeft;
  var lLimit=-1, rLimit=-1;
  if(currentID==0){/*最左边一条*/
    lLimit=0;  rLimit=$('c'+(currentID+1)).offsetLeft
  }
  else if(currentID==n-2){/*最右边一条*/
    lLimit=$('c'+(currentID-1)).offsetLeft;  rLimit=$('container').offsetWidth;
  }
  else{/*中间的*/
    lLimit=$('c'+(currentID-1)).offsetLeft;  rLimit=$('c'+(currentID+1)).offsetLeft;
  }
  t=d < lLimit ? lLimit : d > rLimit ? rLimit : mX- $('container').offsetLeft;

  o.style.left=t+"px";
  $('msg').innerHTML ="当前拖动的是第:"+(currentID+1)+"条分隔条 || 坐标：<b>"+o.offsetLeft+"</b>";
}function config(){
  var cWidth=$("cWidth").value*1;
  $('container').style.width=cWidth;
  n=$("n").value*1;
  var barWidth=$("barWidth").value*1;
  var arrColor=['blue','red','yellow','black','#ddd','green']//这里可以加N多颜色
  var w=cWidth/n,sHTML='';  for (var i=0;i<n-1;i++){
    sHTML+="<div id='c"+i+"'  onmousedown='initDrag(this);' onmouseup='freeDrag(this);' onmousemove='doDrag(this,event);' style='position: absolute;left:"+w*(i+1)+"px;background:"+arrColor[i]+";width:"+barWidth+"px;height:100%;float:left;cursor:e-resize;'></div>"
  }
  $('container').innerHTML=sHTML;
}window.onload=config;</script>
<style>
*{margin:0px;padding:0px;}
#container{
        top: 200px;
        left:100px;
        height:200px;
        width:400px;
        border:1px solid #ccc;
        position: absolute;
}
.columns{
}
.last{border-right:1px solid #ccc;}
</style>
</head><body>
<br>
<fieldset id=config>
  <legend>页面设置:</legend><br>
  容器宽度  ：<input type=text id=cWidth value=400 onpropertychange="config();" /><br />
  分区数    ：<input type=text id=n value=4 onpropertychange="config();" /><br />
  分隔条宽度：<input type=text id=barWidth value=5 onpropertychange="config();" /><br /><br />
</fieldset><div id="msg" style="color:red;text-align:center;"></div>
<div id="container"> </div>
</body>
</html>

调试易

div划分比例的问题

解决方案 »