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 topAnchor">Top Of List 1</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li class="Anchor bottomAnchor">Bottom Of List 1</li>
</ul>
</div>
<div class="right">
    <ul id="list2" class="connected">
    <li class="Anchor topAnchor">Top Of List 2</li>
    <li class="Anchor bottomAnchor">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

var makeSortable=function(selector) {
                    $(selector)
                        .sortable({
                            items: "li:not(.Anchor)",
                            connectWith: ".connected",
                            change: function() {
                                var list = $(this).closest('ul');
                                var topAnchor = $(list).find('.topAnchor');
                                var bottomAnchor = $(list).find('.bottomAnchor');
                                $(list).prepend($(topAnchor).detach());
                                $(list).append($(bottomAnchor).detach());
                            }
                        });
            };
            makeSortable( "#list1" );
            makeSortable( "#list2" );