Tutorial by Examples

Take any list and add an identifier to the outer wrapper (ul, div) <ul id="sortable"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> In your jquery: $(function(){ $('#sortable').sortable({ ...

This used the flex layout with the sortable to create a grid of responsive boxes that can be moved around by dragging and dropping. HTML <div id="sortable"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div&gt...

This example uses a class on the placeholder to turn it into a line and make it take up no room. HTML <div id="sortable"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> JS $("#sortable&q...

Working Example: https://jsfiddle.net/Twisty/4f5yh3pa/7/ Cancelling and Reverting a sortable is not strongly documented. The helps show how moving an item from one list to another connected list can be conditionally cancelled. by default, this is not animated by sortable, this example includes an a...