Emulazione del comportamento di ridimensionamento del frame con div utilizzando jQuery senza utilizzare l'interfaccia utente jQuery?

Question

Sto convertendo un sito per un client da un set di frame a div. Una caratteristica del client è una barra laterale che può essere ridimensionata in base alla quantità di spazio di cui l'utente ha bisogno. Usando i frame è stato integrato il ridimensionamento di questa barra laterale. Tuttavia, sto riscontrando qualche difficoltà nell'emulazione di questa funzionalità in jQuery.

Non desidero utilizzare l'interfaccia utente di jQuery per eseguire questa operazione, non ho bisogno di tutte le funzionalità aggiuntive fornite dalla suite dell'interfaccia utente e preferisco semplicemente scrivere poche righe di codice per risolvere questo problema.

Ho solo bisogno di ridimensionare nel piano orizzontale, le dimensioni verticali sono fisse.

Attualmente ho una soluzione che (sorta) funziona. Il div sidebar può essere ridimensionato, ma solo se un utente fa clic sul div ridimensionabile, trascina il mouse, quindi fa nuovamente clic sul div (per rimuovere l'evento mousemove).

L'esperienza che voglio è questa: un utente passa sopra il div ridimensionabile, preme il pulsante del mouse verso il basso, quindi trascina il div in modo che sia più grande/più piccolo e rilascia il pulsante.

Il problema che sto avendo è questo: se un utente fa clic sul mio div ridimensionabile, prova a trascinarlo per renderlo più piccolo/più grande, il mouse diventa l'icona "no" il mio div che è droga in giro con il mouse.

Forse questo è meglio spiegato verificando il mio codice :.

$(document).ready(function() { 
var i = 0; 
    $('#dragbar').mousedown(function(){ 
     $('#mousestatus').html("mousedown" + i++); 
     $(document).mousemove(function(e){ 
      $('#position').html(e.pageX +', '+ e.pageY); 
      $('#sidebar').css("width",e.pageX+2); 
     }) 
     console.log("leaving mouseDown"); 
    }); 
    $(document).mouseup(function(){ 
     $('#clickevent').html('in another mouseUp event' + i++); 
     $(document).unbind('mousemove'); 
     }); 
}); 

e HTML:

<div id="header"> 
    header 
    <span id="mousestatus"></span> 
    <span id="clickevent"></span> 
</div> 
<div id="sidebar"> 
    <span id="position"></span> 
    <div id="dragbar"> 
    </div> 
    sidebar 
</div> 
<div id="main"> 
    main 
</div> 
<div id="footer"> 
    footer 
</div> 

Ecco una pagina web temporanea con il lavoro layout di base:

http://pastehtml.com/view/1crj2lj.html

Il problema può essere visto se si tenta di ridimensionare la cosa con l'etichetta "barra laterale" utilizzando la barra marrone.

Answer 1

Guarda http://www.jsfiddle.net/gaby/Bek9L/

ho cambiato la zona #main essere left:200px (e no Larghezza).
Aggiunto e.preventDefault() sul mouse per evitare la selezione del testo da verificarsi.
Nel codice altero la proprietà left del #main pure in modo da entrambe le parti si muovono ..

---

Non sei sicuro di quello che problema realmente è, ma ciò che è vedere è che la #sidebar è stata ridimensionata, ma stava andando sotto il #main e così il #dragbar è scomparso ..

Answer 2

Utilizzare event.preventDefault.

$('#dragbar').mousedown(function(e){ 
    e.preventDefault(); 
    // ... 
}); 

Forse è necessario chiamarlo anche in mousemove.