<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="upload.css">
</head>
<body>
<ul class="upload inline-control" id="sortable">
<li class="pic0">
<img src="img/1.jpg" id="cart-0">
<div class="operate">
<i class="toleft">左移</i>
<i class="toright">右移</i>
<i class="del" data-id="0">删除</i>
</div>
</li>
<li class="pic1">
<img src="img/2.jpg" id="cart-1">
<div class="operate">
<i class="toleft">左移</i>
<i class="toright">右移</i>
<i class="del" data-id="1">删除</i>
</div>
</li>
<li class="pic2">
<img src="img/3.jpg" id="cart-2">
<div class="operate">
<i class="toleft">左移</i>
<i class="toright">右移</i>
<i class="del" data-id="2">删除</i>
</div>
</li>
<li class="pic3">
<img src="img/4.jpg" id="cart-3">
<div class="operate">
<i class="toleft">左移</i>
<i class="toright">右移</i>
<i class="del" data-id="3">删除</i>
</div>
</li>
<li class="pic4">
<img src="img/5.jpg" id="cart-4">
<div class="operate">
<i class="toleft">左移</i>
<i class="toright">右移</i>
<i class="del" data-id="4">删除</i>
</div>
</li>
</ul>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
</script>
<script>
$(".toright").click(function(){
var id=$(this).parent().parent().index();
move(id,id+1);
});
$(".toleft").click(function(){
var id=$(this).parent().parent().index();
move(id,id-1);
});
$(".del").click(function(){
$("#cart-"+$(this).data('id')).remove()
});
function move(from,to){
if(to>4 || to<0) return;
// $("div#view").html("<hr>"+from+"=>"+to+"<br>");
var tmp=$("#cart-"+to).attr('src');
var img=$("#cart-"+from).attr('src');
$("#cart-"+to).attr('src',img);
$("#cart-"+from).attr('src',tmp);
}
</script>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection(); //拖动排序的序号怎么返回值是如何传给后台的？
});
</script>
</body>
</html>
