<!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>