JQuery Sortable inside a scrollable DIV
I have the following HTML page which should contain a simple DIV with a simple list using jquery sortable.
The problem is that JQUERY doesn't auto-scroll the list when I drag an item near the borders of the div.
Is there any way to do auto-scroll during DRAG ?
- <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
- <script language="Javascript">
- $(function() {
$("#sortable").sortable({
revert: true,
scroll: true,
scrollSensitivity: 100
});
- });
- </script>
- </head>
<body>
- <div class="demo" style="height:90px; width: 150px; border-style: solid; overflow:auto;">
<ul id="sortable">
<li id="1">Item 1</li>
<li id="2">Item 2</li>
<li id="3">Item 3</li>
<li id="4">Item 4</li>
<li id="5">Item 5</li>
</UL>
- </body>
</html>