Created
January 18, 2017 08:11
-
-
Save mass6/4eed1ccaa1d536632f34ded330a846c3 to your computer and use it in GitHub Desktop.
jQuery-UI Sortable list
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>jQuery UI Sortable - Default functionality</title> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> | |
| <style> | |
| body { | |
| font-family: Arial, Helvetica, sans-serif; | |
| } | |
| table { | |
| font-size: 1em; | |
| } | |
| .ui-draggable, .ui-droppable { | |
| background-position: top; | |
| } | |
| #sortable li span.ordernum { | |
| display: inline-block; | |
| margin-left: 50px; | |
| position: relative; | |
| } | |
| #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } | |
| #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em;} | |
| #sortable li span { position: absolute; margin-left: -1.3em; } | |
| </style> | |
| <script src="https://code.jquery.com/jquery-1.12.4.js"></script> | |
| <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| </head> | |
| <body> | |
| <ul id="sortable"> | |
| <li id="1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> LA Shop <span id="order_1" class="ordernum pull-right">position: 1</span></li> | |
| <li id="2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> NYC Tatttoo <span id="order_2" class="ordernum pull-right">position: 2</span></li> | |
| <li id="3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> CPH Shop <span id="order_3" class="ordernum pull-right">position: 3</span></li> | |
| <li id="4" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Miami Tattoo Shop <span id="order_4" class="ordernum pull-right">position: 4</span></li> | |
| </ul> | |
| <br/> | |
| <div> | |
| <button class="btn btn-success">Save Order</button> | |
| </div> | |
| </body> | |
| <script> | |
| $( function() { | |
| $( "#sortable" ).sortable(); | |
| $( "#sortable" ).disableSelection(); | |
| } ); | |
| var sortableList = $("#sortable"); | |
| var order; | |
| var sortEventHandler = function(event, ui){ | |
| console.log("New sort order!"); | |
| order = sortableList.sortable( "toArray" ); | |
| console.log(order); | |
| $.each(sortableList.children(), function(i, el) { | |
| $(el).children('.ordernum').text("position: " + (i+1)); | |
| }); | |
| }; | |
| sortableList.on("sortstop", sortEventHandler); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment