2012-09-07 11 views
7

Mam nieuporządkowaną listę i dodałem funkcję przeciągania do każdego elementu listy, używając jquery ui przeciągalnego. lista znajduje się wewnątrz elementu div o id = "content". Oto obraz mojej liście ULjquery ui przeciągane przewijanie wewnątrz kontenera

enter image description here

Oto kod mam napisane:

<script src="../../jquery-1.8.0.js"></script> 
<script src="../../ui/jquery.ui.core.js"></script> 
<script src="../../ui/jquery.ui.widget.js"></script> 
<script src="../../ui/jquery.ui.mouse.js"></script> 
<script src="../../ui/jquery.ui.draggable.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $(".draggable").draggable({ 
     scroll: true, 
     scrollSensitivity: 100, 
     revert: true, 
     containment: '#content', 
     zIndex: 999990, 
     revertDuration: 100, 
     delay: 100 
    }); 
}); 
</script> 
<div style="width:200px;height:300px;overflow:auto;" id="content"> 
    <ul> 
    <li class="draggable">One</li> 
    <li class="draggable">Two</li> 
    <li class="draggable">Three</li> 
    <li class="draggable">Four</li> 
    <li class="draggable">five</li> 
    <li class="draggable">six</li> 
    <li class="draggable">Seven</li> 
    <li class="draggable">Eight</li> 
    <li class="draggable">Nine</li> 
    <li class="draggable">Ten</li> 
    <li class="draggable">Eleven</li> 
    <li class="draggable">Twelve</li> 
    <li class="draggable">Thirteen</li> 
    <li class="draggable">Fourteen</li> 
    <li class="draggable">Fifteen</li> 
    <li class="draggable">Sixteen</li> 
    <li class="draggable">Seventeen</li> 
    <li class="draggable">Eighteen</li> 
    <li class="draggable">Nineteen</li> 
    <li class="draggable">Twenty</li> 
     </ul> 
</div> 

Co chciałbym zrobić, to kiedy jestem przeciągając dowolny element listy wewnątrz pojemnika (tzn. div z id = "content") i gdy mysz znajduje się na krawędzi granicy div lub rozmiaru, kontener powinien również przewijać, aby móc poruszać się w górę iw dół wewnątrz kontenera.

Na przykład, jeśli chcę przeciągnąć ostatni element listy na liście do pierwszego na liście, więc gdy mysz znajduje się na górnym końcu krawędzi div, kontener (w naszym przypadku div) powinien również przewinąć się automatycznie . Czy jest to błąd w jquery ui przeciągalny? Proszę o pomoc

+0

I szukałem stron demo jquery ui, ale nie tyle pomocy, również szukano google z małym sukcesem – sonam

+1

[jQuery.Drag] (http://javascriptmvc.com/docs.html#!jQuery.Drag) ma [zwoje ] (http://javascriptmvc.com/docs.html#!jQuery.Drag.prototype.scrolls) parametr, który działa (jest wersja demo na stronie). Może zobaczyć, jak działa ten kod i wprowadzić go w zachowanie przeciągalne jQuerys? –

+0

Czy to już nie jest obsługiwane przez 'scroll: true'? Wygląda na to, że robisz już to, co opisujesz w Chrome, co najmniej http://jsfiddle.net/SqNx6/ –

Odpowiedz

1

Spróbuj obniżamy do jQuery 1.7.2

(ITS nie powinien pracować z 1,8 jeszcze myślę. Można znaleźć najnowszą wersję zgodną obrębie rar podczas pobierania jQuery UI)

+0

Jest to prawdopodobnie również powód, dla którego działa z fiddle @ James Montagne wykonane. –

Powiązane problemy