Làm thế nào để thay đổi kích thước theo chiều dọc một DIV chỉ với jQuery - không có plugin?

Question

Edit: tôi đặt đoạn mã này trong jsbin: http://jsbin.com/eneru

---

tôi đang cố gắng để thay đổi kích cỡ người dùng (chỉ theo chiều dọc) một phần tử DIV với jQuery. Tôi đọc về jQuery UI, tôi đã thử nó, và trong một vài phút, tôi đã làm việc đó. Nhưng thư viện đang thêm một khoản phí ~ 25KB mà tôi muốn tránh, vì tôi chỉ muốn thay đổi kích thước theo chiều dọc đơn giản.

Vì vậy, tôi đã cố gắng tự mình làm điều đó. Ở đây nó là HTML, Tôi đang sử dụng kiểu nội tuyến cho rõ ràng:

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

Như bạn thấy, có một chút thanh dưới mỗi thẻ DIV, vì vậy người dùng có thể kéo nó lên hoặc xuống để thay đổi kích thước DIV. Dưới đây là các mã Javascript (sử dụng 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); 
     } 
    }); 
}); 

Nó hoạt động, nhiều hơn hoặc ít hơn, nhưng nếu bạn kéo thanh quá nhanh, nó dừng lại sau khi di chuyển chuột và phá vỡ tất cả mọi thứ.

Đây là lần đầu tiên tôi cố gắng làm điều gì đó nghiêm trọng (ahem) với JS và jQuery, vì vậy tôi có thể làm điều gì đó ngu ngốc. Nếu có, vui lòng cho tôi biết :)

Answer 1

Bạn là làm điều gì đó ngu ngốc: Bạn đang cố gắng tự làm.

Hãy lắng nghe tôi, hãy lắng nghe tôi: Javascript trên các trình duyệt là một điều khủng khiếp và kinh khủng. Có nhiều công cụ trong nhiều phiên bản với nhiều hệ điều hành khác nhau, tất cả đều có nhiều sự tinh tế, tất cả đều làm cho Javascript khá nhiều địa ngục để làm việc. Có một lý do chính đáng tại sao librabries như jQuery (và phần mở rộng của họ) đã bùng nổ phổ biến: rất nhiều lập trình viên vĩ đại đã dành rất nhiều thời gian để tóm tắt tất cả những mâu thuẫn khủng khiếp này để chúng ta không phải lo lắng về nó.

Bây giờ, tôi không chắc chắn về cơ sở người dùng của bạn, có thể bạn đang phục vụ cho các bà nội trợ cũ mà vẫn có quay số. Nhưng đối với hầu hết các phần trong ngày và tuổi này, 25KB nhấn vào tải trang ban đầu (vì nó sẽ được lưu trữ sau đó) cho sự yên tâm rằng điều này sẽ làm việc trong tất cả các trình duyệt một cách nhất quán là một mức giá nhỏ để trả. Không có thứ như "thay đổi kích thước" đơn giản khi nói đến Javascript, vì vậy bạn nên sử dụng giao diện người dùng.

Answer 2

Tôi đồng ý với Paolo về việc sử dụng giao diện người dùng, nhưng đây là một số sửa đổi để mã của bạn để làm cho nó làm việc:

$(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

Bạn có thể tiết kiệm có một handler làm-gì gọi là khi bạn không thay đổi kích thước, bằng cách chỉ ràng buộc chức năng MouseMove khi bạn đang thực sự kéo:

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

}); 

(mẫu tại http://jsbin.com/ufuqo)

Answer 4

tôi đã làm việc trên một điều tương tự và quản lý để có được nó để làm việc w ith tối đa và chiều cao tối thiểu và với tôi dường như làm việc rất chất lỏng, đây là mã của tôi.

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

ví dụ trực tiếp về cách tôi sử dụng, kéo nút màu đỏ, thiếu hình ảnh để tôi thay thế bằng màu đơn giản.http://jsbin.com/ufuqo/23