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