Come si creano 3 immersioni regolabili?

Question

quello che voglio:

| A | | B | | C | 
     ^  ^

Quando si sposta il handles sinistra e destra A, B, e C ridimensionamento di conseguenza

| A | | B  | | C | 

Quello che ho è il || tra il B e C scorrevole, ma non il ridimensionamento B e tutto quello che ottengo sull'altro è il cursore di ridimensionamento. Fondamentalmente C è una tenda e copre A e B. Ho ottenuto dimensioni min lavorando per C.

| A |   C  | 

ho rotto qualcun altro è perfettamente buon codice per arrivare a questo punto:

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>

giocato con lui qui: https://jsfiddle.net/ju9zb1he/5/

Answer 1

ero alla ricerca di una soluzione che richiesto CSS meno esteso. Ha un bug minore (FISSO), ma si spera che questo dovrebbe iniziare. Ecco uno DEMO.

Anche io mirava a utilizzare DOM Traversal methods come .next() e .prev() in quel modo non sarebbe stato attributo così dipendente, e sarebbe facilmente riutilizzabili se avete bisogno di una caratteristica come questo più volte in una pagina.

Edit - Ulteriori Spiegazione

L'idea qui è onClick di un .handle vogliamo raccogliere la larghezza totale (var tWidth) dei .prev() e .next() div relativi alla .handle nel DOM. Possiamo quindi utilizzare la posizione del mouse iniziale (var sPos) per sottrarre la quantità di pixel che abbiamo spostato con il mouse (e.pageX). In questo modo ci dà la larghezza corretta che dovrebbe avere il div .prev() su mousemove. Per ottenere la larghezza del div .next() dobbiamo solo sottrarre la larghezza del div .prev() dalla larghezza totale (var tWidth) che abbiamo memorizzato onClick del .handle. Spero che questo ti aiuti! Fammi sapere se hai altre domande, ma probabilmente non sarò disponibile fino a domani.

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 
    } 
}); 

Modifica

Il bug era causato da 2 cose.

1) Su mousemove dividevamo la larghezza totale per due, invece di un offset del mouse aggiornato.

2) Lo sPos non si aggiornava su mousemove e rimaneva un numero statico in base alla posizione del clic.

Risoluzione

Aggiornare i spos su MouseMove in questo modo l'offset del mouse si basa accuratamente fuori della posizione MouseMove precedente, piuttosto che la posizione di scatto. Quando questo è fatto, possiamo quindi sottrarre la larghezza del div .next() dalla larghezza totale. Quindi sottraiamo la nostra attuale posizione del mouse dalla larghezza rimanente. Anche lo fiddle è stato aggiornato.

$('.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; 
    } 
}); 

Modifica

Aggiunto una condizione aggiuntiva sulla MouseMove per evitare che la resistenza di superare la larghezza totale (var tWidth).

Answer 2

Puoi spiegare cosa stai cercando di realizzare?

Non credo che sia necessario utilizzare la posizione: assoluta. La premessa del posizionamento assoluto consiste nell'override del margine e del riempimento imposti su un elemento dal suo genitore.

Non è necessario eseguire questa operazione, tutti gli elementi hanno un posizionamento relativo di default che li fa muovere reciprocamente e non consentire sovrapposizioni.

Sono probabilmente manca qualcosa, ma penso che questo è ciò che si vuole con nient'altro che un po 'di CSS molto di base: 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; 
}