<!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>