jquery ui sắp xếp được - cách nhấn vào thanh cuộn phá vỡ nó

Question

cuộn một div đó là trong một container .sortable() sẽ bắt đầu kéo div khi bạn phát hành scrollbar

Trong fiddle, có 3 sortables khác nhau, 1 trong số đó là một di chuyển một

http://jsfiddle.net/wnHWH/1/

Bug: nhấn vào thanh cuộn và kéo nó lên hoặc xuống để di chuyển qua các nội dung, khi bạn thả chuột, div bắt đầu kéo, mà làm cho nó theo con chuột của bạn xung quanh và có không có cách nào để bỏ nó mà không làm mới trang.

Answer 1

Bạn có thể sử dụng .mousemove trường hợp jquery như thế này:

$('#sortable div').mousemove(function(e) { 
    width = $(this).width(); 
    limit = width - 20; 
    if(e.offsetX < width && e.offsetX > limit) 
     $('#sortable').sortable("disable"); 
    else 
     $('#sortable').sortable("enable"); 
}); 

Tôi có tạo fiddle rằng làm việc ở đây http://jsfiddle.net/aanred/FNzEF/. Hy vọng nó đáp ứng nhu cầu của bạn.

Answer 2

sortable() có thể chỉ định bộ chọn cho một tay cầm giống như draggable(). Sau đó, chỉ các phần tử phù hợp mới nhận được các sự kiện nhấp chuột. Bạn chỉ định công cụ chọn xử lý như sau:

$('#sortable').sortable({handle : '.handle'}); 

Bạn đã có hầu hết những gì bạn cần cho phần còn lại. Các div bên trong trên phần tử tràn của bạn làm cho một xử lý phù hợp, như thế này:

<div style="height: 200px;overflow:auto"> 
    <div class="handle" style="height: 300;"> 
     blah 
     blah 
     blah 

Sau đó, bạn cần phải khôi phục khả năng phân loại của mọi thứ khác. Bạn sẽ nghĩ rằng bạn chỉ có thể cung cấp cho những divs lớp handle, nhưng nó đang tìm kiếm cho trẻ em, vì vậy bạn cần để bọc tất cả trong số họ như vậy:

<div><div class="handle">asadf</div></div> 

Modified fiddle

Answer 3

bổ sung vào câu trả lời SubRed của:

---

Điều này hoàn toàn phù hợp với nhu cầu của tôi. Tuy nhiên, thay vì dựa vào độ rộng của thanh cuộn là 20 pixel (như trên), tôi đã sử dụng mã từ:

How can I get the browser's scrollbar sizes?

Điều này cho phép mã để xử lý độ rộng cuộn khác nhau trên các thiết lập khác nhau. Mã được dán vào đây để thuận tiện:

function getScrollBarWidth() 
{ 
    var inner = document.createElement('p'); 
    inner.style.width = "100%"; 
    inner.style.height = "200px"; 

    var outer = document.createElement('div'); 
    outer.style.position = "absolute"; 
    outer.style.top = "0px"; 
    outer.style.left = "0px"; 
    outer.style.visibility = "hidden"; 
    outer.style.width = "200px"; 
    outer.style.height = "150px"; 
    outer.style.overflow = "hidden"; 
    outer.appendChild (inner); 

    document.body.appendChild (outer); 
    var w1 = inner.offsetWidth; 
    outer.style.overflow = 'scroll'; 
    var w2 = inner.offsetWidth; 
    if (w1 == w2) w2 = outer.clientWidth; 

    document.body.removeChild (outer); 

    return (w1 - w2); 
} 

Tôi cũng đã sử dụng giá trị độ rộng cho chiều cao của thanh cuộn và mã được sửa đổi của SubRed cho phù hợp. Điều này bây giờ làm việc với một hoặc cả hai thanh cuộn.

Tôi cũng sử dụng mã từ:

Detecting presence of a scroll bar in a DIV using jQuery?

Để xác định sự hiện diện của một trong hai thanh cuộn và thích nghi các bật/tắt của mã có thể phân loại cho phù hợp.

Rất cám ơn.