WebPangea: 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;}

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



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

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


CSS cursor style on hovering over the list


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


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


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


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


DraggableList dependancies on:


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

Leave a Reply

Your email address will not be published. Required fields are marked *

To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image