Как настроить изменяемый размер div?

Question

У меня есть изменяемый размер div, и я хочу, чтобы он выглядел как пример на картинке ниже и в URL:

https://bitmax.io/# / margin / usdt / btmx

Я хочу отобразить индикатор курсора с изменяемым размером в центре вверху div вместо стандартного (внизу справа).

Мой код: -

.third-column-box-2 {
  height: 100px;
  width: 300px;
  resize: vertical;
  background: #ccc;
  overflow: auto;
}

.third-column-box-2 ::-webkit-resizer {
  background-color: red;
}

<div class="third-column-box-2">
  <div class="table-responsive">
    <table class="table table-bordered trade-table mt-0">
      <thead>
        <tr>
          <th class="text-light-purple">Price(USDT)</th>
          <th class="text-light-purple">Size</th>
          <th class="text-light-purple">Time(USDT)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="text-white"><i class="fa fa-star"></i> ETH/USDT </div>
          </td>
          <td>
            <div class="text-white">411.42</div>
          </td>
          <td>
            <div class="text-red">1181.468</div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="text-white"><i class="fa fa-star"></i> ETH/USDT </div>
          </td>
          <td>
            <div class="text-white">411.42</div>
          </td>
          <td>
            <div class="text-green">1181.468</div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="text-white"><i class="fa fa-star"></i> ETH/USDT </div>
          </td>
          <td>
            <div class="text-white">411.42</div>
          </td>
          <td>
            <div class="text-red">1181.468</div>
          </td>
        </tr>


      </tbody>
    </table>
  </div>
</div>

Answer 1

Вы можете использовать фрагмент ниже, чтобы выполнить ваши требования. Обратите внимание на тег span, который позволяет перетаскивать div. Вы можете украсить его немного в соответствии с вашими потребностями и спецификациями. Я использовал hiddenbar id, чтобы сделать код открытым и визуальным; но вы можете удалить его, чтобы получить желаемый точный результат.

Как правило, следует отметить следующие ключевые моменты:

Использование свойства pageY для создания он может перетаскиваться в направлении NS.

A тег span и его выравнивание по центру , чтобы помочь получить внешний вид, как вы ожидали.

Остальной код понятно (если вы знаете JS и jquery, я полагаю).

var i = 0;
var dragging = false;
   $('#dragbar').mousedown(function(e){
       e.preventDefault();
       
       dragging = true;
       var main = $('#main');
       var wrapper = $('#wrapper');
       var hiddenbar = $('<div>',
                        {id:'hiddenbar',
                         css: {
                                width: main.outerWidth(),
                           			top: e.pageY,
                                left: main.offset().left
                               }
                        }).appendTo('#wrapper');
       
        $(document).mousemove(function(e){
          hiddenbar.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;  
           
           $('#topbar').css("height",percentage + "%");
           $('#main').css("height",mainPercentage + "%");
           $('#hiddenbar').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: #FFB374;
   height:40%;
    width: 100%;
    min-height: 30px;
   max-height: calc(100% - 30px);
}

#topbar{
  display: flex;
  align-items: flex-end;
   background-color: #6380C2;
   width:100%;
   height:60%;
   overflow-y: hidden;
   min-height: 30px;
   max-height: calc(100% - 30px);
}

#dragbar{
   background-color:black;
   color:#fff;
   border-radius: 0 0 4px 4px;
   z-index:2;
   width: 28px;
   position:absolute;
   left: 47%;
   cursor: ns-resize;
   
}
#hiddenbar{
  width: 100%;
    height: 3px;
    background-color:#000;
    opacity:0.5;
    position:absolute;
    cursor: col-resize;
    z-index:999}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clearfix" id="wrapper">
  <div id="topbar">
       <span id="position"></span>
      <div>
        <span id="dragbar">===</span>
      </div>
  </div>
  <div id="main"> <br/></br>This is One Of the sample div. You have to keep your tables over here.   </div>
</div>

Вы также можете прочитать этот удивительный блог о различных свойствах и функциях реализации, которые я использовал здесь для лучшего понимания.