3 ayarlanabilir div nasıl yaratırsınız?

Question

istediğim Ne:

| A | | B | | C | 
     ^  ^

buna göre

| A | | B  | | C | 

Ne var sürgülü B ve C arasında || değil sol ve B, A sağ ve C boyutlandırma olduğunu handles taşıdığınızda B yeniden boyutlandırılıyor, diğeri ise yeniden boyutlandırma imlecidir. Temel olarak C bir perdedir ve A ve B'u kapsar. C için çalışıyorum.

var isResizing = false, 
 
    who='', 
 
    lastDownX = 0; 
 

 
$(function() { 
 
    var container = $('#container'), 
 
     left = $('#left'), 
 
     right = $('#right'), 
 
     middle = $('#middle'), 
 
     hand2 = $('#hand2'), 
 
     handle = $('#handle'); 
 

 
    handle.on('mousedown', function (e) { 
 
     isResizing = true; 
 
     who=e.target.id; 
 
     lastDownX = e.clientX; 
 
    }); 
 

 
    $(document).on('mousemove', function (e) { 
 
     var temp, min; 
 
     // we don't want to do anything if we aren't resizing. 
 
     if (!isResizing) 
 
      return; 
 
     min=container.width() * 0.1; 
 
     temp = container.width() - (e.clientX - container.offset().left); 
 
     if (temp < min) 
 
      temp = min; 
 
    if (who == 'handle') 
 
      right.css('width', temp); 
 
    if (who == 'hand2') 
 
      left.css('width', temp); 
 
    }).on('mouseup', function (e) { 
 
     // stop resizing 
 
     isResizing = false; 
 
    }); 
 
});

body, html { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#container { 
 
    width: 100%; 
 
    height: 100%; 
 
    /* Disable selection so it doesn't get annoying when dragging. */ 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: moz-none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 
#container #left { 
 
    width: 40%; 
 
    height: 100%; 
 
    float: left; 
 
    background: red; 
 
} 
 
#container #middle { 
 
    margin-left: 40%; 
 
    height: 100%; 
 
    background: green; 
 
} 
 
#container #right { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 200px; 
 
    background: rgba(0, 0, 255, 0.90); 
 
} 
 
#container #handle { 
 
    position: absolute; 
 
    left: -4px; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 80px; 
 
    cursor: w-resize; 
 
} 
 
#container #hand2 { 
 
    position: absolute; 
 
    left: 39%; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 80px; 
 
    cursor: w-resize; 
 
}

<div id="container"> 
 
    <!-- Left side --> 
 

 
    <div id="left"> This is the left side's content!</div> 
 
     <!-- middle --> 
 
    <div id="middle"> 
 
     <div id="hand2"></div> This is the middle content! 
 
    </div> 
 

 
    <!-- Right side --> 
 
    <div id="right"> 
 
     <!-- Actual resize handle --> 
 
     <div id="handle"></div> This is the right side's content! 
 
    </div> 
 

 
</div>

burada onunla oynamaya Been:

| A |   C  | 

Ben başkası kadar bu almak için gayet iyi kod kırdı Bir çözüm arıyordu https://jsfiddle.net/ju9zb1he/5/

Answer 1

o daha az kapsamlı CSS gerekli. Bir küçük hata (FIXED) var, ama umarım bu başlamanız gerekir. İşte bir DEMO.

Ayrıca ben .next() ve .prev() o kadar bağımlı özellik olmaz ve bir sayfasında bu birden çok kez benzeri bir özellik gerektiğinde kolayca yeniden kullanılabilir olacağını yolu gibi DOM Traversal methods kullanmak amaçladık.

Düzen - Daha Açıklama

fikri burada DOM'da .handle göre .prev() ve .next() divs toplam genişliği (var tWidth) toplamak istediğiniz bir .handle ait onClick olduğunu. Daha sonra fareyi hareket ettirdiğimiz piksel miktarını (e.pageX) çıkarmak için başlangıç ​​fare konumunu (var sPos) kullanabiliriz. Bu, .prev() div'in mousemove üzerinde olması gereken doğru genişliği verir. .next() div'in genişliğini elde etmek için, yalnızca .prev() div'in genişliğini 'un onClick sakladığımız toplam genişlikten (var tWidth) çıkarmamız yeterlidir. Bu yardımcı olur umarım! Başka sorularınız varsa lütfen bildirin, ancak yarına kadar muhtemelen müsait olmayacağım.

HTML

<div class="container"> 
    <div id="left"></div> 
    <div id="l-handle" class="handle"></div> 
    <div id="middle"></div> 
    <div id="r-handle" class="handle"></div> 
    <div id="right"></div> 
</div> 

CSS

#left, #middle, #right { 
    display: inline-block; 
    background: #e5e5e5; 
    min-height: 200px; 
    margin: 0px; 
} 

#l-handle, #r-handle { 
    display: inline-block; 
    background: #000; 
    width: 2px; 
    min-height: 200px; 
    cursor: col-resize; 
    margin: 0px; 
} 

jQuery

var isDragging = false, 
    cWidth = $('.container').width(), 
    sPos, 
    handle, 
    tWidth; 
$('#left, #middle, #right').width((cWidth/3) - 7); // Set the initial width of content sections 

$('.handle').on('mousedown', function(e){ 
    isDragging = true; 
    sPos = e.pageX; 
    handle = $(this); 
    tWidth = handle.prev().width() + handle.next().width(); 
}); 

$(window).on('mouseup', function(e){ 
    isDragging = false; 
}); 

$('.container').on('mousemove', function(e){ 
    if(isDragging){ // Added an additional condition here below 
     var cPos = sPos - e.pageX; 
     handle.prev().width((tWidth/2) - cPos); // This was part of the bug... 
     handle.next().width(tWidth - handle.prev().width()); 
     // Added an update to sPos here below 
    } 
}); 

Düzenleme

Hataya 2 şey neden oldu.

1) Mousemove üzerinde, güncellenmiş bir fare ofseti yerine toplam genişliğini ikiye böldük.

2) sPos, mousemove üzerinde güncellenmiyordu ve tıklama konumundan ayrılmış statik bir sayı olarak kaldı.

Çözünürlük

Güncelleme üzerindeki SPOS mousemove ofset fare doğru önceki mousemove pozisyonunun kapalı dayandığını yolu yerine tıklama konumu. Bu yapıldığında, daha sonra .next() div genişliğini toplam genişliğinden çıkarabiliriz. Sonra mevcut fare konumumuzu kalan genişlikten çıkarırız. fiddle da güncellendi.

$('.container').on('mousemove', function(e){ 
    var cPos = sPos - e.pageX; 
    if(isDragging && ((tWidth - handle.next().width()) - cPos) <= tWidth){ 
     handle.prev().width((tWidth - handle.next().width()) - cPos); 
     handle.next().width(tWidth - handle.prev().width()); 
     sPos = e.pageX; 
    } 
}); 

düzenleme

Eklenen toplam genişliği (var tWidth) aşmasını sürükle önlemek için mouseMove üzerinde ek bir durumdur.

Answer 2

Neyi başarmaya çalıştığınızı açıklayabilir misiniz?

Pozisyon kullanmanız gerektiğine inanmıyorum: mutlak. Mutlak konumlandırmanın temeli, bir elemanın ebeveyn tarafından empoze edilen marjı ve dolguyu geçersiz kılmaktır.

Bunu yapmak zorunda değilsiniz, tüm öğelerin varsayılan olarak göreceli konumlandırmaları vardır, bu da onları birbirleriyle itmeye ve çakışmaya izin vermez.

Muhtemelen bir şey kaçırıyorum, ama bu çok temel birkaç CSS ama hiçbir şey istediğini düşünüyorum: http://jsfiddle.net/3bdoazpk/

<div class='first'> 
    asdf 
</div><div class='second'> 
    dasdf 
</div><div class='third'> 
    sadf 
</div> 

body { 
    margin: 0; 
} 

div { 
    display: inline-block; 
    height: 100%; 
} 

.first, .third { 
    width: 40%; 
} 

.first { 
    background-color: red; 
} 

.second { 
    background-color: blue; 
    width: 20%; 
} 

.third { 
    background-color: green; 
}