Giả lập hành vi thay đổi kích thước khung hình bằng các div sử dụng jQuery mà không cần sử dụng jQuery UI?

Question

Tôi đang chuyển đổi trang web cho khách hàng từ bộ khung thành div. Một tính năng mà khách hàng có là một thanh bên có thể được thay đổi kích thước tùy thuộc vào dung lượng mà người dùng cần. Sử dụng các khung hình thay đổi kích thước của thanh bên này được xây dựng in Tuy nhiên, tôi đang gặp một số khó khăn thi đua khả năng này trong jQuery.

Tôi không muốn sử dụng jQuery UI để làm điều này, tôi không cần tất cả các chức năng bổ sung mà bộ giao diện người dùng cung cấp, và chỉ muốn viết một vài dòng mã để xử lý việc này.

Tôi chỉ cần thay đổi kích thước trong mặt phẳng nằm ngang, kích thước dọc được cố định.

Hiện tại tôi có giải pháp (loại) hoạt động. Div bên lề có thể được thay đổi kích thước, nhưng chỉ khi người dùng nhấp vào div có thể thay đổi kích thước, kéo chuột, sau đó nhấp lại vào div (để xóa sự kiện di chuột).

Trải nghiệm tôi muốn là: Người dùng di chuột qua div có thể thay đổi kích thước, nhấn nút chuột xuống, sau đó kéo div lớn hơn/nhỏ hơn và nhả nút.

Vấn đề tôi gặp phải là: Nếu người dùng nhấp vào div có thể thay đổi kích thước của tôi, sau đó cố kéo nó để nhỏ hơn/lớn hơn, chuột trở thành biểu tượng "không" và có phiên bản trong suốt div của tôi là thuốc xung quanh bằng chuột.

Có lẽ điều này được giải thích rõ hơn bằng cách kiểm tra mã của tôi :.

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

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

Đây là một trang web tạm thời với lao động bố trí cơ bản:

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

Vấn đề có thể được nhìn thấy nếu bạn cố gắng để thay đổi kích thước điều dán nhãn "sidebar" bằng thanh màu nâu.

Answer 1

Nhìn vào http://www.jsfiddle.net/gaby/Bek9L/

Tôi đã thay đổi diện tích #main là left:200px (và không có chiều rộng).
Đã thêm e.preventDefault() trên mousedown để tránh việc chọn văn bản xuất hiện.
Trong mã i thay đổi left tài sản của #main cũng vì vậy cả hai bên di chuyển ..

---

Không chắc chắn những gì bạn có vấn đề thực sự là, nhưng những gì là thấy là các #sidebar được thay đổi kích cỡ nhưng đang diễn ra bên dưới #main và do đó, #dragbar biến mất ..

Answer 2

Sử dụng event.preventDefault.

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

Có thể bạn cũng cần gọi số này theo số mousemove.