Jak pozwolić na zmianę rozmiaru DIV tylko z jQuery - bez wtyczek?

Question

Edit: umieścić ten fragment kodu w jsbin: http://jsbin.com/eneru

---

Próbuję niech Resize użytkownika (tylko pionowo) elementu DIV z jQuery. Czytałem o jQuery UI, próbowałem go i po kilku minutach działałem. Ale biblioteka dodaje obciążenie w wysokości około 25 KB, którego chciałbym uniknąć, ponieważ chcę tylko prostej zmiany rozmiaru w pionie.

Więc próbowałem zrobić to sam. Tutaj jest HTML, Używam inline stylizacji dla jasności:

<div id="frame" style="border: 1px solid green; height: 350px"> 
    <div style="height: 100%">Lorem ipsum blah blah</div> 
    <span id="frame-grip" style="display: block; width: 100%; height: 16px; background: gray"></span> 
</div> 

Jak widać, nie jest mały bar pod elementu DIV, dzięki czemu użytkownik może przeciągnąć go w górę lub w dół, aby zmienić rozmiar DIV. Tutaj jest kod Javascript (jQuery):

$(document).ready(function(){ 
    var resizing = false; 
    var frame = $("#frame"); 
    var origHeightFrame = frame.height(); 
    var origPosYGrip = $("#frame-grip").offset().top; 
    var gripHeight = $("#frame-grip").height(); 


    $("#frame-grip").mouseup(function(e) { 
     resizing = false; 
    }); 

    $("#frame-grip").mousedown(function(e) { 
     resizing = true; 
    }); 

    $("#frame-grip").mousemove(function(e) { 
     if(resizing) { 
      frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2); 
     } 
    }); 
}); 

To działa, mniej lub bardziej, ale jeśli przeciągnij pasek zbyt szybko, to zatrzymuje się zgodnie z ruchem myszy i przerw wszystko.

Po raz pierwszy próbuję zrobić coś poważnego (ahem) z JS i jQuery, więc może robię coś głupiego. Jeśli tak, to proszę mi powiedzieć :)

Answer 1

Jesteś jesteś robi coś głupiego: Próbujesz zrobić to sam.

Wysłuchaj mnie, wysłuchaj mnie: JavaScript w różnych przeglądarkach to okropna, okropna rzecz. Istnieje wiele silników w wielu wersjach z wieloma różnymi systemami operacyjnymi, z których każdy ma wiele subtelności, a wszystkie z nich sprawiają, że obsługa Javascript jest bardzo trudna. Istnieje doskonały powód, dla którego librabrie, takie jak jQuery (i ich rozszerzenia), zyskały na popularności: wielu świetnych programistów poświęciło wiele godzin na uprzątnięcie tych wszystkich okropnych niespójności, więc nie musimy się tym martwić.

Nie jestem pewien co do twojej bazy użytkowników, może jesteś catering dla starych gospodyń domowych, które wciąż mają połączenie dial-up. Ale w przeważającej części w tym dniu i wieku 25KB trafi na początkowy ładunek strony (ponieważ będzie on następnie buforowany) dla spokoju ducha, że ​​to będzie działać we wszystkich przeglądarkach konsekwentnie jest to niewielka cena do zapłacenia. Nie ma czegoś takiego jak "prosta" zmiana rozmiaru, jeśli chodzi o JavaScript, więc lepiej skorzystać z UI.

Answer 2

zgadzam się z Paolo na temat korzystania z UI, ale tutaj są pewne modyfikacje w kodzie, aby to działa:

$(document).ready(function(){ 
    var resizing = false; 
    var frame = $("#frame"); 

    $(document).mouseup(function(e) { 
     resizing = false; 
    }); 

    $("#frame-grip").mousedown(function(e) { 
     e.preventDefault(); 
     resizing = true; 
    }); 

    $(document).mousemove(function(e) { 
     if(resizing) { 
      var origHeightFrame = frame.height(); 
      var origPosYGrip = $("#frame-grip").offset().top; 
      var gripHeight = $("#frame-grip").height(); 
      frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2); 
     } 
    }); 
}); 

Answer 3

można zapisać posiadające obsługi nie robić nic nazywany gdy nie zmiana rozmiaru, przez wiążące tylko funkcję mouseMove gdy jesteś rzeczywiście przeciąganie:

$(document).ready(function(){ 
    var resizing = function(e) { 
     var frame = $("#frame"); 
     var origHeightFrame = frame.height(); 
     var origPosYGrip = $("#frame-grip").offset().top; 
     var gripHeight = $("#frame-grip").height(); 
     frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2); 
     return false; 
    } 

    var stopResizing = function(e) { 
     $(document).unbind("mouseover", resizing); 
    } 

    $("#frame-grip").mouseup(stopResizing); 

    $("#frame-grip").mousedown(function(e) { 
     e.preventDefault(); 
     $(document).bind("mouseover", resizing).mouseup(stopResizing); 
    }); 

}); 

(próbki w http://jsbin.com/ufuqo)

Answer 4

pracowałem na coś podobnego i udało się dostać do pracy w z maksymalną i minimalną wysokością i wydaje mi się, że działa bardzo płynnie, to był mój kod.

$(document).ready(function() 
{ 
    var resizing = false; 
    var frame = $("#frame").height(); 

    $(document).mouseup(function(event) 
    { 
     resizing = false; 
     frame = $("#frame").height(); 
    }); 

    $("#frame-grip").mousedown(function(event) 
    { 
     resizing = event.pageY; 
    }); 

    $(document).mousemove(function(event) 
    { 
     if (resizing) 
     { 
      $("#frame").height(frame + resizing - event.pageY); 
     } 
    }); 
}); 

żywo przykładem tego, jak użyłem go wyciągnąć czerwony przycisk, brakowało obrazów więc zastąpione prostym kolorze.http://jsbin.com/ufuqo/23