README.md

permalink	title
pat/sortable/	Sortable

Sortable pattern.

A pattern to make listings sortable.

Configuration

Option	Type	Default	Description
selector	string	"li"	Selector to use to draggable items in pattern.
dragClass	string	"item-dragging"	Class to apply to original item that is being dragged.
cloneClass	string	"dragging"	Class to apply to cloned item that is dragged.
drop	function, string	""	Callback function or name of callback function in global namespace to be called when item is dropped.

Examples

Example 1

Default

<style type="text/css" media="screen"> .item-dragging { background-color: red; } .dragging { background: green; } </style>

• One
• Two
• Three

<style type="text/css" media="screen">
    .item-dragging {
        background-color: red;
    }
    .dragging {
        background: green;
    }
</style>
<ul class="pat-sortable">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Table

The patttern needs to be defined on the direct parent element of the elements to be sorted. Heads up: A would be added to the table by browser automatically. The pattern needs to be defined on the then.

One One	One Two
Two One	Two Two
Three One	Three Two

<table class="table table-stripped">
    <tbody class="pat-sortable" data-pat-sortable="selector:tr;">
        <tr>
            <td>One One</td>
            <td>One Two</td>
        </tr>
        <tr>
            <td>Two One</td>
            <td>Two Two</td>
        </tr>
        <tr>
            <td>Three One</td>
            <td>Three Two</td>
        </tr>
    </tbody>
</table>