jQuery UI ordinabile - cliccando scrollbar rompe

Question

Scorrimento un div che si trova all'interno di un contenitore .sortable() si inizia a trascinare l'div quando si rilascia la barra di scorrimento

Nel violino, ci sono 3 diversi sortables, 1 di loro è uno scrolling uno

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

Bug: cliccare sulla barra di scorrimento e trascinarla verso l'alto o verso il basso per scorrere il contenuto, quando si rilascia il mouse, il div inizia a trascinare, il che lo rende seguire il vostro mouse intorno e non c'è nessun modo per sbloccarlo senza aggiornare la pagina.

Answer 1

È possibile utilizzare .mousemove caso di jQuery come questo:

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

devo creare violino che lavora qui http://jsfiddle.net/aanred/FNzEF/. Spero che soddisfi le tue necessità.

Answer 2

sortable() può specificare un selettore per un handle simile a draggable(). Quindi solo gli elementi corrispondenti ottengono gli eventi click. Si specifica il selettore di handle come questo:

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

Hai già la maggior parte di ciò che ti serve per il resto. Il div interno sul vostro elemento straripamento fa un manico adatto, in questo modo:

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

allora avete bisogno di ripristinare il sortability di tutto il resto. Si potrebbe pensare che si può solo dare quei div classe handle, ma che sta cercando per i bambini, quindi è necessario avvolgere tutti loro in questo modo:

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

Modified fiddle

Answer 3

Supplemento alla risposta di SubRed:

---

Questo ha funzionato perfettamente per le mie esigenze. Tuttavia, piuttosto che contare sulla larghezza della barra di scorrimento essendo a 20 pixel (come sopra), ho usato il codice:

How can I get the browser's scrollbar sizes?

Questo consente al codice per gestire diverse larghezze barra di scorrimento a differenti configurazioni. Il codice viene incollato qui per comodità:

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

Ho anche usato il valore della larghezza per l'altezza della barra di scorrimento e modificato il codice di SubRed per adattarsi. Questo ora funziona con una o entrambe le barre di scorrimento.

Ho anche usato codice:

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

Per determinare la presenza di una barra di scorrimento ed atto l'accensione/spegnimento del codice sortable conseguenza.

Molte grazie.