Draggable scrolling list with jQuery

DraggableList is a jquery plugin for making a list or other html element scroll within a draggable container.

Check out a demo here

Simply point the pluggin at an unordered list (or other element), specify a containment size and the list will become draggable. Drag the list up and down to scroll its contents.

Example Usage

<style type="text/css">
   body{ font-family:Georgia;}
   .myList {list-style:none; margin:0px; padding:0px;}
   .myList li{ height:50px; border-bottom:solid 1px #dedede; margin:0px; padding:0px 2px 0 2px;}
   .draggableList{ border:solid 1px black;}
</style>

<script type="text/javascript">
$(document).ready(function() {
$('.myList').draggableList({height:150, listPosition:0});
});
</script>

<ul class="myList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>

Options

The plugin has a bunch of options with default values as follows:

        cursor: 'n-resize',
    height: '150',
    width: '100',
    listPosition: '0',
    panelCssClass:'draggableList'

cursor

CSS cursor style on hovering over the list

height

Numeric-value - pixels The height of the element which will hold the list (it's overflow will be set to hidden)

width

Numeric-value - pixels The width of the element which will hold the list

listPosition

Value between 0 and 100 : Where abouts the list will be positioned relative to it's container. When 0, the list will appear scrolled right to the top, so the first element will be at the top of the container. When set to 100 the list will be scrolled right to the bottom

panelCssClass

Name of the css class that is added to the container item. Used to style the container.

Dependancies

DraggableList dependancies on:

• jQuery
• ui.core
• ui.draggable

Source

Head across to http://code.google.com/p/draggablelist/ and grab the plugin now.

And if anyone uses the list on one of their projects, I'd love to hear about it and get feedback on how it could be improved...