Javascript 如何在拖动div2时调整div1的大小？_Javascript_Html_Css_Jquery Ui_Html5 Canvas

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

javascript html css jquery-ui html5-canvas

Javascript 如何在拖动div2时调整div1的大小？,javascript,html,css,jquery-ui,html5-canvas,Javascript,Html,Css,Jquery Ui,Html5 Canvas,[在此处输入链接说明][1]您好我在做一些类似于米的事情。。我需要创建可调整大小的div。当我拖动div2时，div需要向上提升大小请查看链接，看看我在尝试什么在这里，当我拖动红色条一半的时候，A2中的颜色应该上升，当我拖动下一半的时候，A1的颜色应该上升与B&C类似 <div id="vbar"> <div id="hbar"> </div> <div id="A11"></div> <div id="A1">A

[在此处输入链接说明][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>


A1
A12
A2

请帮忙

提前感谢

检查jQuery UI

您需要javascript为条形图提供操作

这里是一个自制的滑块控制一个酒吧，让你开始快速和粗糙的轮廓

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

下面是代码和演示：


正文{背景色：象牙；}
#帆布{
位置：相对位置；
边框：1px纯红；
宽度：300px；
高度：30px；
}
#拇指{
位置：绝对位置；
边框：1px纯蓝色；
宽度：20px；
高度：30px；
背景：蓝色；
}
#酒吧{
位置：绝对位置；
顶部：300px；
左：10px；
背景：绿色；
宽度：50px；
高度：30px；
}
$（函数（）{
var$canvas=$（“#canvas”）；
var canvasOffset=$canvas.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
变量$thumb=$（“#thumb”）；
$thumb.pos=0；
$thumb.maxX=$canvas.width（）-$thumb.width（）；
$thumb.percent=函数（）{
返回（$thumb.pos/$thumb.maxX）；
}
var$bar=$（“#bar”）；
$bar.baseY=200；
$bar.maxHeight=150；
//从50%开始
设置值（$thumb.maxX/2）；
var isDown=假；
var-startX；
var startY；
功能手柄向下（e）{
e、 预防默认值（）；
startX=parseInt（e.clientX-offsetX）；
startY=parseInt（e.clientY-offsetY）；
//把你的鼠标下的东西放在这里
isDown=真；
}
功能handleMouseUp（e）{
e、 预防默认值（）；
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//把你的鼠标放在这里
isDown=假；
}
函数handleMouseOut（e）{
e、 预防默认值（）；
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//把你的老鼠屎放在这里
isDown=假；
}
功能手柄移动（e）{
如果（！isDown）{return；}
e、 预防默认值（）；
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//把你的mousemove放在这里
var dx=mouseX startX；
var dy=老鼠星；
startX=mouseX；
斯塔蒂=老鼠；
设置值（$thumb.pos+dx）；
}
函数设置值（值）{
$thumb.pos=Math.min（Math.max（值，0），$thumb.maxX）；
var height=$bar.maxHeight*$thumb.percent（）；
$thumb.css({
“左”：$thumb.pos
});
$bar.css({
“顶部”：$bar.baseY-height，
“高度”：高度
});
}
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
$（“#canvas”）.mouseup（函数（e）{handleMouseUp（e）；}）；
$（“#canvas”）.mouseout（函数（e）{handleMouseOut（e）；}）；
}); // end$（函数（）{}）；

显示您尝试过的代码。欢迎来到stackoverflow！请向我们展示一些代码，以及到目前为止您尝试了什么（以及为什么它不起作用）。我建议使用

<!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>