li to json

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="left">
<ul id="list1" class="connected">
    <li class="Anchor">Top Of List 1</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li class="Anchor">Bottom Of List 1</li>
</ul>
</div>
<div class="right">
    <ul id="list2" class="connected">
    <li class="Anchor">Top Of List 2</li>
    <li class="Anchor">Bottom Of List 2</li>
</ul>
</div>

CSS

ul { width: 40%;display:block; list-style: none;  padding: 0; }
li { background: white; position:relative;width:150px;;margin:3px;padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; }
li .handle { background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; }
.ui-selecting { background: #eee; }
.ui-selecting .handle { background: #ddd; }
.ui-selected { background: #def; }
.ui-selected .handle { background: #cde; }
.left{postion:relative;float:left;}
.right{postion:relative;float:right;left:50%;}

JavaScript

$( "#list1" )
    .sortable({ items: "li:not(.Anchor)",
              connectWith: ".connected"})
$( "#list2" )
    .sortable({ items: "li:not(.Anchor)",
              connectWith: ".connected"})