Подтвердить что ты не робот

Как изменить размер DIV, перетаскивая только одну сторону?

Позвольте мне быть более конкретным... Я не хочу, чтобы DIV изменял размер, пока я перетаскиваю. Я хочу вытащить его (и, возможно, вертикальная линия следует за моим курсором), и когда я отпущу, он изменяет размер div.

4b9b3361

ОТВЕТЫ

Ответ 1

Хотелось бы сделать это, очень приятное решение от 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/

Ответ 2

Посмотрите на этот пример

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/

это изменение кода, который я опубликовал в разделе "Эмуляция поведения изменения размера кадра с помощью div с использованием jQuery без использования jQuery UI"?

Ответ 4

Здесь немного другой способ сделать это без float, но сначала с динамическим изменением контента в реальном времени!

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>

Ответ 5

Я отредактировал решение с 1-го комментария, но для вертикального изменения размеров блоков 

var i = 0;
var dragging = false;
   $('#dragbar').mousedown(function(e){
       e.preventDefault();
       
       dragging = true;
       var main = $('#main');
       var wrapper = $('#wrapper');
       var ghostbar = $('<div>',
                        {id:'ghostbar',
                         css: {
                                width: main.outerWidth(),
                           			top: e.pageY,
                                left: main.offset().left
                               }
                        }).appendTo('#wrapper');
       
        $(document).mousemove(function(e){
          ghostbar.css("top", (e.pageY + 2));
       });
       
    });

   $(document).mouseup(function(e){
       if (dragging) 
       {
           var percentage = ((e.pageY - $('#wrapper').offset().top) / $('#wrapper').height()) * 100;
           var mainPercentage = 100-percentage;  
           
           $('#sidebar').css("height",percentage + "%");
           $('#main').css("height",mainPercentage + "%");
           $('#ghostbar').remove();
           $(document).unbind('mousemove');
           dragging = false;
       }
    });
body,html{width:100%;height:100%;padding:0;margin:0;}
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
#wrapper {
  width: 600px;
  margin: 50px auto 0 auto;
  height: 300px;
  background: yellow;
}

#main{
   background-color: BurlyWood;
   height:40%;
    width: 100%;
    min-height: 30px;
   max-height: calc(100% - 30px);
}
#sidebar{
  display: flex;
  align-items: flex-end;
   background-color: IndianRed;
   width:100%;
   height:60%;
   overflow-y: hidden;
   min-height: 30px;
   max-height: calc(100% - 30px);
}

#dragbar{
   background-color:black;
   height:3px;
   float: right;
   width: 100%;
   cursor: row-resize;
}
#ghostbar{
  width: 100%;
    height: 3px;
    background-color:#000;
    opacity:0.5;
    position:absolute;
    cursor: col-resize;
    z-index:999}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div class="clearfix" id="wrapper">
  <div id="sidebar">
       <span id="position"></span>
      <div id="dragbar"></div>
  </div>
  <div id="main">  </div>
</div>

Ответ 6

Я написал (большую часть) это некоторое время назад http://jsfiddle.net/ydTCZ/12/. Это для стола, но было бы нелегко адаптировать его к div. Я показываю вам это, потому что он дает представление о jQuery, требуемом для создания эффекта изменения размера, что позволяет полностью настроить ваши потребности.

Ответ 7

Здесь вы можете найти изменчивый div, который обеспечивает эту обратную связь, но только изменяет размер после отпускания.

http://jqueryui.com/demos/resizable/#visual-feedback