列出项目在拖放时交换自己

Question

我有一个无序列表：

<ul class="sortable">
            <li class="ui-state-default"  id="first"><span style="float:right;"class="glyphicon glyphicon-remove"></span><br/>




            <table class="rounded-corner">
    <thead>
        <tr>
            <th></th>
            <th>Product</th>
            <th>Details</th>
            <th>Price</th>
            <th>Date</th>
            <th>Category</th>
            <th>User</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
        <tfoot>
        <tr>
            <td colspan="12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.</td>
        </tr>
    </tfoot>
    <tbody>
        <tr class="odd">
            <td><input type="checkbox" name="" /></td>
            <td>Box Software</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>45$</td>
            <td>10/04/2011</td>
            <td>web design</td>
            <td>Alex</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td>
        </tr>
        <tr class="even">
            <td><input type="checkbox" name="" /></td>
            <td>Trial Software</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>155$</td>
            <td>12/04/2011</td>
            <td>web design</td>
            <td>Carrina</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td>
        </tr>
        <tr class="odd">
            <td><input type="checkbox" name="" /></td>
            <td>Hosting Pack</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>45$</td>
            <td>10/04/2011</td>
            <td>web design</td>
            <td>Alex</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
        </tr>
        <tr class="even">
            <td><input type="checkbox" name="" /></td>
            <td>Duo Software</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>745$</td>
            <td>10/04/2011</td>
            <td>web design</td>
            <td>Alex</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
        </tr>
        <tr class="odd">
            <td><input type="checkbox" name="" /></td>
            <td>Alavasti Software</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>45$</td>
            <td>10/04/2011</td>
            <td>web design</td>
            <td>John</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
        </tr>
        <tr class="even">
            <td><input type="checkbox" name="" /></td>
            <td>Box Software</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>45$</td>
            <td>10/04/2011</td>
            <td>web design</td>
            <td>Doe</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
        </tr>


    </tbody>
</table>




            </li>

            <!------------------------------------------------------------------------------------------------------------------------------->
            <li class="ui-state-default" id="second"><span style="float:right;"class="glyphicon glyphicon-remove"></span><br/>
                <table class="rounded-corner">
    <thead>
        <tr>
            <th></th>
            <th>Product</th>
            <th>Details</th>
            <th>Price</th>
            <th>Date</th>
            <th>Category</th>
            <th>User</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
        <tfoot>
        <tr>
            <td colspan="12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.</td>
        </tr>
    </tfoot>
    <tbody>
        <tr class="odd">
            <td><input type="checkbox" name="" /></td>
            <td>Box Software</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>45$</td>
            <td>10/04/2011</td>
            <td>web design</td>
            <td>Alex</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td>
        </tr>
        <tr class="even">
            <td><input type="checkbox" name="" /></td>
            <td>Trial Software</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>155$</td>
            <td>12/04/2011</td>
            <td>web design</td>
            <td>Carrina</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td>
        </tr>
        <tr class="odd">
            <td><input type="checkbox" name="" /></td>
            <td>Hosting Pack</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>45$</td>
            <td>10/04/2011</td>
            <td>web design</td>
            <td>Alex</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
        </tr>
        <tr class="even">
            <td><input type="checkbox" name="" /></td>
            <td>Duo Software</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>745$</td>
            <td>10/04/2011</td>
            <td>web design</td>
            <td>Alex</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
        </tr>
        <tr class="odd">
            <td><input type="checkbox" name="" /></td>
            <td>Alavasti Software</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>45$</td>
            <td>10/04/2011</td>
            <td>web design</td>
            <td>John</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
        </tr>
        <tr class="even">
            <td><input type="checkbox" name="" /></td>
            <td>Box Software</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>45$</td>
            <td>10/04/2011</td>
            <td>web design</td>
            <td>Doe</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
        </tr>


    </tbody>
</table>
            </li>
            <!------------------------------------------------------------------------------------------------------------------------------->
            <li class="ui-state-default" id="third">3</li>
            <li class="ui-state-default" id="fourth">4</li>
            <li class="ui-state-default" id="fifth">5</li>
            <li class="ui-state-default" id="sixth">6</li>
            <li class="ui-state-default" id="seventh">7</li>
            <li class="ui-state-default" id="eighth">8</li>
            <li class="ui-state-default" id="ninth">9</li>
            <li class="ui-state-default" id="tenth">10</li>
            <li class="ui-state-default" id="eleventh">11</li>
            <li class="ui-state-default" id="second">12</li>
            <!--li class="ui-state-default" id="second">13</li>
            <li class="ui-state-default" id="second">14</li>
            <li class="ui-state-default" id="second">15</li>
            <li class="ui-state-default" id="second">16</li-->
        </ul>

拖放jquery已应用于它们并且其工作正常。我需要的是，当列表项被拖动到其他地方时，它应该与删除它的列表项交换。 到目前为止我用过的jquery：

  <script type="text/javascript">
            $(function () {
        $(".sortable").sortable();
        $(".sortable").disableSelection();

        $('.ui-state-default').on('click', function(){
        var offset = $(this).offset();
        alert('top - ' + offset.top + "\nleft - " + offset.left);});
        //ONCLICK CLOSE
        $(".glyphicon-remove").click(function () {
            var tblId = $(this).parent().attr("id");
           // alert(tblId);
           var ans = confirm("Are you sure you want to remove this table?");
            if(ans)
                $("#" + tblId).hide(500);
            //else exit();
        });

        $(document).bind("contextmenu", function(e) {
            var tblId,tbl, ans;
            tblId = $(this).parent().attr("id");
            tbl = $("#" + tblId);
            if (!(tbl.is(":visible"))) {
                // It's not showing
                ans = confirm("Are you sure you want to show this table?");
            }
            if(ans){
                $('.glyphicon-remove').parent().show(500);
            }
        return false;
        });

    });
    </script>

如何修改或添加内容到上面的jquery，以便当列表项被拖动到另一个列表项的位置时，它们交换位置，并且在交换之前和之后也会映射坐标。