如何通过拖动DIV的一侧来调整DIV的大小？

Question

让我更具体一点......我不希望DIV在我拖动时调整大小.我想将它拖出来(也许我的光标后面有一条垂直线)当我发布时,它会调整div的大小.

Answer 1

看看这个例子

HTML

<div id="sidebar">
     <span id="position"></span>
    <div id="dragbar"></div>
    sidebar
</div>
<div id="main">
    main
</div>

jQuery的

var dragging = false;
$('#dragbar').mousedown(function(e){
   e.preventDefault();

   dragging = true;
   var main = $('#main');
   var ghostbar = $('<div>',
                    {id:'ghostbar',
                     css: {
                            height: main.outerHeight(),
                            top: main.offset().top,
                            left: main.offset().left
                           }
                    }).appendTo('body');

    $(document).mousemove(function(e){
      ghostbar.css("left",e.pageX+2);
   });
});

$(document).mouseup(function(e){
   if (dragging) 
   {
       $('#sidebar').css("width",e.pageX+2);
       $('#main').css("left",e.pageX+2);
       $('#ghostbar').remove();
       $(document).unbind('mousemove');
       dragging = false;
   }
 });

演示http://jsfiddle.net/gaby/Bek9L/1779/

它是我在使用jQuery而不使用jQuery UI时使用div进行仿真框架调整大小行为中发布的代码的更改？

Answer 2

一直在寻找这个,Gaby非常好的解决方案.虽然我的要求是没有任何绝对元素并且使用百分比而不是像素,所以我已经改变了Gaby的代码以适应这一点(如果有人感兴趣的话)

CSS

#main{
  background-color: BurlyWood;
  float: right;
  height:200px;
  width: 75%;
}
#sidebar{
  background-color: IndianRed;
  width:25%;
  float: left;
  height:200px;
  overflow-y: hidden;
}
#dragbar{
  background-color:black;
  height:100%;
  float: right;
  width: 3px;
  cursor: col-resize;
}
#ghostbar{
  width:3px;
  background-color:#000;
  opacity:0.5;
  position:absolute;
  cursor: col-resize;
  z-index:999
}

JS

var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e){
   e.preventDefault();

   dragging = true;
   var main = $('#main');
   var ghostbar = $('<div>',
                    {id:'ghostbar',
                     css: {
                            height: main.outerHeight(),
                            top: main.offset().top,
                            left: main.offset().left
                           }
                    }).appendTo('body');

    $(document).mousemove(function(e){
      ghostbar.css("left",e.pageX+2);
   });

});

$(document).mouseup(function(e){
   if (dragging) 
   {
       var percentage = (e.pageX / window.innerWidth) * 100;
       var mainPercentage = 100-percentage;

       $('#console').text("side:" + percentage + " main:" + mainPercentage);

       $('#sidebar').css("width",percentage + "%");
       $('#main').css("width",mainPercentage + "%");
       $('#ghostbar').remove();
       $(document).unbind('mousemove');
       dragging = false;
   }
});

演示:http://jsfiddle.net/Bek9L/3020/

Answer 3

有一种更简单的方法来实现这一点。CSS 3 具有resize使 HTML 元素可调整大小的属性，同时遵循其他 CSS 属性，如最小/最大宽度等。

.resizeable {
  resize: both;
  overflow: auto;
  border: 2px solid black;
}

有关更多信息，请参阅有关resizeCSS 3 属性的MDN 文档。

Answer 4

Pure JS
Live Update
CSS Variable

let dragging = 0,
  body = document.body,
  target = document.getElementById('dragbar');

function clearJSEvents() {
  dragging = 0;
  body.removeEventListener("mousemove", resize);
  body.classList.remove('resizing');
}

function resize(e) {
  if (e.pageX > 400 || e.pageX < 200) {
    return;
  }
  body.style.setProperty("--left-width", e.pageX + 'px');
}

target.onmousedown = function(e) {
  e.preventDefault();
  dragging = 1;
  body.addEventListener('mousemove', resize);
  body.classList.add('resizing');
};

document.onmouseup = function() {
  dragging ? clearJSEvents() : '';
};

body {
  --left-width: 300px;
  padding: 0;
  margin: 0;
}

body.resizing {
  cursor: col-resize;
}

#main,
#sidebar,
#dragbar {
  top: 0;
  height: 100%;
  background: white;
  position: absolute;
}

#sidebar {
  background: #e6e9f0;
  width: var(--left-width);
}

#main {
  right: 0;
  overflow: scroll;
  width: calc(100% - var(--left-width));
}

#main section {
  margin: 20px auto;
  border-radius: 10px;
  background: white;
  height: 100px;
  width: calc(100% - 60px);
  transition: 0.3s ease-in-out 0s;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}

#main section:hover {
  box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px #A8D1FD;
}

#dragbar {
  right: 0;
  width: 5px;
  opacity: 0;
  cursor: col-resize;
  background: #0099e5;
  transition: 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s;
}

#dragbar:hover,
body.resizing #dragbar {
  opacity: 1;
  transition: 0.3s ease-in-out 0s, opacity 0.3s ease-in-out .3s;
}

<body>
  <section id="sidebar">
    <div id="dragbar"></div>
  </section>
  <main id="main">
    <section></section>
    <section></section>
    <section></section>
  </main>
</body>

Answer 5

使用带有ghost选项的jQuery UI :

查看工作jsFiddle演示:

$( "#resizable" ).resizable({ ghost: true });

Answer 6

这是一种不带浮点数的稍微不同的方法，但首先需要实时动态更改内容！（这是最好的答案）

var dragging = false;

$('#dragbar').mousedown(function(e){
  e.preventDefault();
  dragging = true;
  var side = $('#side');
  $(document).mousemove(function(ex){
    side.css("width", ex.pageX +2);
  });
});

$(document).mouseup(function(e){
  if (dragging) 
  {
    $(document).unbind('mousemove');
    dragging = false;
  }
});

div{
    color: #fff;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    
}
#container{
    background-color:#2E4272;
    display:flex;
}
#side{
    background-color:#4F628E;
    width: 300px;
    position: relative;
}
#main{
    background-color:#7887AB;
    z-index: 1;
    flex-grow: 1;
}
#dragbar{
   background-color:black;
   height:100%;
   position: absolute;
   top: 0;
   right: 0;
   width: 5px;
   cursor: col-resize;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div id="side">
      Side<br /> Blabla<br /> Blabla<br /> Blabla<br />
      <div id="dragbar"></div>
    </div>
    <div id="main">Dynamically sized content</div>
</div>