Emulacja zachowania rozmiaru ramki z elementami div za pomocą jQuery bez użycia interfejsu jQuery?

Question

Konwertuję witrynę dla klienta z zestawu ramek na elementy div. Jedną z funkcji, którą posiada klient, jest pasek boczny, który można zmienić w zależności od tego, ile miejsca potrzebuje użytkownik. Używając ramek, została wbudowana zmiana rozmiaru tego paska bocznego. Mam jednak pewne trudności z emulowaniem tej możliwości w jQuery.

Nie chcę tego używać w jQuery UI, nie potrzebuję wszystkich dodatkowych funkcji, które oferuje pakiet UI, a raczej wystarczy napisać kilka linii kodu, aby się tym zająć.

Potrzebuję tylko zmienić rozmiar w płaszczyźnie poziomej, wymiary pionowe są stałe.

Obecnie mam rozwiązanie, które (rodzaj) działa. Rozmiar div paska bocznego może być zmieniany, ale tylko wtedy, gdy użytkownik kliknie na resizable div, przeciągnie myszą, a następnie kliknie div ponownie (aby usunąć zdarzenie mousemove).

Wymagane doświadczenie: Użytkownik unosi się nad blokowalnym elementem div, naciska przycisk myszy w dół, a następnie przeciąga element div, aby był większy/mniejszy i zwalnia przycisk.

Problem, który mam, to: Jeśli użytkownik kliknie na mój rozmiar div, a następnie spróbuje go przeciągnąć, aby go zmniejszyć/powiększyć, mysz staje się ikoną "nie", a jest przezroczysta wersja mój div, który jest narkotykiem w pobliżu za pomocą myszy.

Być może lepiej to wyjaśnić, sprawdzając mój kod :.

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

i 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> 

Oto strona temp z podstawową obróbkę układ:

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

Problem widać w przypadku próby zmiany rozmiaru rzecz oznaczony "pasek boczny" za pomocą brązowego paska.

Answer 1

Spójrz na http://www.jsfiddle.net/gaby/Bek9L/

zmieniłem obszar #main być left:200px (a nie szerokość).
Dodano e.preventDefault() na mousedown, aby uniknąć wyboru tekstu do wystąpienia.
W kodzie i zmieniać własność #main a więc obie strony przenieść left ..

---

Nie wiesz, co cię naprawdę jest problemem, ale to, co widzę to, że #sidebar był zmieniany ale szło pod #main, a więc #dragbar zniknął ..

Answer 2

Użyj event.preventDefault.

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

Może trzeba będzie również zadzwonić pod numer mousemove.