我有一个无序列表：
<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，以便当列表项被拖动到另一个列表项的位置时，它们交换位置，并且在交换之前和之后也会映射坐标。