Jquery ui sortable : Multiple connected lists

by Dipak1991

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<ul id="sortable1" class="sortable_list">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
</ul>
<ul id="sortable2" class="sortable_list connectedSortable"></ul>
<div>
    <input type="text" id="searchKey" />
</div>
 <div>
     <input type="checkbox" value="1"/>
     <input type="checkbox" value="2"/>
</div>

CSS

.sortable_list {
     border: 1px solid #eee;
     width: 150px;
     min-height: 20px;
     list-style-type: none;
     margin: 0;
     padding: 5px 0 0 0;
     float: left;
     margin-right: 10px;
 }
 .sortable_list li {
     margin: 0 5px 5px 5px;
     padding: 5px;
     font-size: 1.2em;
     width: 120px;
 }
 .sortable_list li > a {
     float: right;
 }
}

JavaScript

$(function () {
     $(".sortable_list").sortable({
         connectWith: ".connectedSortable",
     }).disableSelection();
 });

 $(document).on("dblclick", "#sortable1 > li", function () {
     $(this).appendTo("#sortable2");
     event.preventDefault();
     event.stopPropagation();
 });

 $(document).on("dblclick", "#sortable2 > li", function () {
     $(this).appendTo("#sortable1");
     event.preventDefault();
     event.stopPropagation();
 });


 $(document).on("click", "a.close", function () {
     $(this).closest("li").remove();
     event.preventDefault();
     event.stopPropagation();
 });

 $(document).on("keyup", "#searchKey", function () {

     var inputVal = $(this).val();

     $("#sortable1 li:hidden").show();

     $("#sortable1 li").filter(function () {
         return $(this).html().indexOf(inputVal);
     }).hide();
 });