如何在拖动 div2 时调整 div1 的大小？ [关闭]答案

【问题标题】：How to resize div1 while dragging div2? [closed]如何在拖动 div2 时调整 div1 的大小？ [关闭]
【发布时间】：2014-03-27 13:49:54
【问题描述】：

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

我在这里做类似仪表的事情。我需要创建可调整大小的 div。并且当我拖动 div2 时，div 需要向上增加大小..

请检查链接，看看我在尝试什么..

在这里，当我将红色条拖到一半时，A2 中的颜色应该上升，当我拖动后半段时，A1 中的颜色应该上升..

类似的方式 B&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/

请帮忙

提前致谢

【问题讨论】：

显示你尝试过的代码
欢迎来到stackoverflow！请向我们展示一些代码，以及您迄今为止尝试过的内容（以及为什么它没有奏效）。我推荐使用jsfiddle.net

标签： javascript html css jquery-ui html5-canvas

【解决方案1】：

您需要 javascript 来对您的条形图执行操作。

这是一个自制滑块的快速粗略轮廓，用于控制条形以帮助您入门。

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

这是代码和演示：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>

【讨论】：

【解决方案2】：

检查 jQuery UI。 jQuery UI - resizable

【讨论】：