jQuery UI sortable - klikając przewijania łamie to

Question

Przewijanie div, który jest w .sortable() pojemnika rozpocznie przeciągając div po zwolnieniu przewijania

W skrzypcach, istnieją 3 różne sortables, 1 z nich jest przewijanie jeden

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

Bug: kliknij na pasku przewijania i przeciągnij go w górę lub w dół, aby przewinąć zawartość, po zwolnieniu przycisku myszy, div zaczyna się przeciągać, co czyni go śledzić myszki dookoła i nie ma nie można tego odkleić bez odświeżenia strony.

Answer 1

Można użyć .mousemove zdarzenie jQuery tak:

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

mam stworzyć skrzypce, który działa tu http://jsfiddle.net/aanred/FNzEF/. Mam nadzieję, że spełnia twoje potrzeby.

Answer 2

sortable() może określić selektor dla uchwytu podobnie jak draggable() ma. Wtedy tylko dopasowane elementy otrzymują zdarzenia kliknięcia. Użytkownik określa selektor dźwigni w następujący sposób:

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

Masz już większość tego, czego potrzebujesz do końca. Wewnętrzny element div na twoim przepełnionym elemencie tworzy odpowiednią klamkę, taką jak ta:

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

Następnie musisz przywrócić możliwość sortowania wszystkiego. Można by pomyśleć, może po prostu nadać tym div klasy handle, ale szuka dzieci, więc trzeba owinąć wszystkie z nich tak:

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

Modified fiddle

Answer 3

Suplement do odpowiedzi SubRed za:

---

To działało idealnie na moje potrzeby. Jednakże, zamiast opierać się na szerokość paska przewijania mając 20 pikseli (jak powyżej), to stosuje się kod:

How can I get the browser's scrollbar sizes?

Pozwala to kod obsługiwać różne szerokości paska przewijania, w różnych konfiguracjach. Kod jest wklejony tutaj dla wygody:

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

Użyłem również wartość szerokości na wysokości paska przewijania i zmodyfikowany kod SubRed do kombinezonu. Działa teraz z jednym lub dwoma pasami przewijania.

użyłem również kod:

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

celu określenia obecności albo paska przewijania i dostosowany włączaniem/wyłączanie kodu sortable odpowiednio.

Wielkie dzięki.