<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>images</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="viewport" content=" initial-scale=0.80,user-scalable=no" /> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> <style type="text/css"> .thum_bg { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; left:0px;} </style> <script type="text/javascript"> $(document).ready(function(){ $( ".slide_content_wrap" ).sortable({ revert: true }); $( "div" ).disableSelection(); }); </script> </head> <body> <div class="slide_content_wrap ui-sortable" style="margin-left:0px;"> <div class="thum_bg off"> <div class="slide_thum " id="idx_0"> <img class="slide_thum_img select" src="image/01.png" width="50px" height="50px"> </div> </div> <div class="thum_bg off"> <div class="slide_thum " id="idx_1"> <img class="slide_thum_img" src="image/02.png" width="50px" height="50px"> </div> </div> <div class="thum_bg off"> <div class="slide_thum " id="idx_2"> <img class="slide_thum_img" src="image/03.png" width="50px" height="50px"> </div> </div> </div> </body> </html>