jquery ui sortierbar - klicken Scrollbar bricht es

Question

ein Div Scrolling, die innerhalb eines .sortable() Container startet die div ziehen, wenn Sie die Scrollbar loslassen

In der Geige, gibt es 3 verschiedene sortables, 1 davon ist ein Scrollen

ein

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

Bug: auf der Bildlaufleiste klicken und ziehen Sie ihn nach oben oder unten durch den Inhalt zu blättern, wenn Sie die Maustaste loslassen, beginnt die div zu ziehen, die es der Maus folgen macht um, und es gibt keine Möglichkeit, es zu entfernen, ohne die Seite zu aktualisieren.

Answer 1

Sie können .mousemove Ereignis von jquery wie folgt verwenden:

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

Ich habe Geige erstellen, die hier http://jsfiddle.net/aanred/FNzEF/ funktioniert. Hoffe es erfüllt Ihre Bedürfnisse.

Answer 2

sortable() kann einen Selektor für einen Griff ähnlich wie draggable() angeben. Dann erhalten nur die übereinstimmenden Elemente die Klickereignisse. Sie geben den Griffwähler wie folgt an:

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

Sie haben bereits das meiste, was Sie für den Rest benötigen. Der innere div auf dem überquellenden Element macht einen geeigneten Griff, wie folgt aus:

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

Dann müssen Sie den sortability alles andere wiederherzustellen. Man könnte meinen, Sie könnten nur diejenigen divs die handle Klasse geben, aber es ist für Kinder suchen, so müssen Sie wie so alle von ihnen wickeln:

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

Modified fiddle

Answer 3

Ergänzung zur SubRed Antwort:

---

Dies funktionierte perfekt für meine Bedürfnisse. Anstatt jedoch auf die Breite der Scrollbar verlassen 20 Pixel sein (wie oben), habe ich den Code aus:

How can I get the browser's scrollbar sizes?

Dieser den Code ermöglicht verschiedene Scrollbar Breiten auf verschiedene Setups zu handhaben. Der Code wird hier eingefügt für Bequemlichkeit:

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

Ich habe auch die Breite Wert für die Höhe des Rollbalkens und modifizierten SubRed den Code anzupassen. Dies funktioniert jetzt mit einer oder beiden Bildlaufleisten.

I verwendet auch Code aus:

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

Um die Anwesenheit von entweder Bildlaufleiste zu bestimmen, und geeignet ist, das Ein-/Ausschalten entsprechend des sortierbaren Code.

Vielen Dank.