Question

[在此输入链接描述] [1]嗨..

这里做了像米一样的东西..我需要创建可调整大小的div。当我拖动div2时，div需要向上升大。

请检查链接以查看尝试的内容..

这里当我拖动红色条的一半时，A2中的颜色应该上升，当我拖动下半部时，A1颜色应该上升..

类似的方式B＆amp; C ..

<div id="vbar">
<div id="hbar">
</div>

<div id="A11"></div>
<div id="A1">A1</div>
<div id="A12">A12</div>
<div id="A2">A2</div>

http://jsfiddle.net/EM2v3/1/

请帮忙

提前致谢

Answer 1

您需要使用javascript对条形图进行操作。

这是一个快速粗略的轮廓，一个自制滑块控制一个栏，让你开始。

添加2个div作为滑块控件：container-div中的thumb-div
添加另一个div作为条形图的栏
使用CSS，绝对相对于其容器放置拇指
听取用户的拖拽（== mousedown + mousemove）
根据使用拖动的距离重新定位拇指
根据拇指的位置更改条形

enter image description here

这是代码和演示：http://jsfiddle.net/m1erickson/wgMyW/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    #canvas{
        position:relative;
        border:1px solid red;
        width:300px;
        height:30px;
    }
    #thumb{
        position:absolute;
        border:1px solid blue;
        width:20px;
        height:30px;
        background:blue;
    }
    #bar{
        position:absolute;
        top:300px;
        left:10px;
        background:green;
        width:50px;
        height:30px;
    }
</style>
<script>
$(function(){

    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var $thumb=$("#thumb");
    $thumb.pos=0;
    $thumb.maxX=$canvas.width()-$thumb.width();
    $thumb.percent=function(){
        return($thumb.pos/$thumb.maxX);
    }

    var $bar=$("#bar");
    $bar.baseY=200;
    $bar.maxHeight=150;

    // start at 50%
    setValue($thumb.maxX/2);

    var isDown=false;
    var startX;
    var startY;


    function handleMouseDown(e){
      e.preventDefault();
      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      isDown=true;
    }

    function handleMouseUp(e){
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mouseup stuff here
      isDown=false;
    }

    function handleMouseOut(e){
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mouseOut stuff here
      isDown=false;
    }

    function handleMouseMove(e){
      if(!isDown){return;}
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      var dx=mouseX-startX;
      var dy=mouseY-startY;
      startX=mouseX;
      startY=mouseY;

      setValue($thumb.pos+dx);

    }

    function setValue(value){

        $thumb.pos=Math.min(Math.max(value,0),$thumb.maxX);

        var height=$bar.maxHeight*$thumb.percent();

        $thumb.css({
            "left":$thumb.pos
        });

        $bar.css({
            "top":$bar.baseY-height,
            "height":height
        });
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});
</script>
</head>
<body>
    <div id="canvas">
        <div id="thumb">&nbsp;</div>
    </div>
    <div id="bar"></div>
</body>
</html>

Answer 2

检查jQuery UI。 jQuery UI - resizable

如何在拖动div2时调整div1的大小？

2 个答案: