Fork me on GitHub

Draggable List

jQuery DraggableList plugin. Point 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.

Learn more »

Click the list below and drag it up and down. Marvel at its draggability.

    <script src="" type="text/javascript"></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src="jquery.draggableList.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.myList').draggableList({height:150, listPosition:0});
        .draggableList {border:solid 1px black;}
        .myList li { height:30px; }
    <ul class="myList">

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.


Has dependancies on:

jQuery ui.core ui.draggable