Run ยป
<!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <style> .container { width: 900px; margin: 0 auto; } .container ul li { border: 1px solid #000; border-radius: 5px; list-style: none outside none; margin-bottom: 10px; margin-right: 30px; padding: 5px; } .container ul li:hover { background-color: #F2FFF2; cursor: pointer; } div.left { border: 1px solid #000; border-radius: 5px; width: 350px; margin-right: 15px; float: left; min-height: 250px; } div.right { border: 1px solid #000; border-radius: 5px; width: 350px; margin-right: 15px; float: left; min-height: 250px; } </style> <body> <div class="container"> <div class="left"> <ul></ul> </div> <div class="right"> <ul> <li data-order="1">Item 1</li> <li data-order="2">Item 2</li> <li data-order="3">Item 3</li> <li data-order="4">Item 4</li> <li data-order="5">Item 5</li> <li data-order="6">Item 6</li> <li data-order="7">Item 7</li> <li data-order="8">Item 8</li> <li data-order="9">Item 9</li> <li data-order="10">Item 10</li> </ul> </div> <div style="clear:both;"></div> </div> <script> jQuery(document).ready(function() { jQuery("div.right").delegate("ul li", "click", function() { jQuery("div.left ul").append(jQuery(this)); var sortedLis = jQuery("div.left ul").find(" li").sort(function(a, b) { var first = $(a).data('order'); var second = $(b).data('order'); return parseInt(first) - parseInt(second); }); jQuery("div.left ul").empty().append(sortedLis); }); }); </script> </body> </html>