jquery sortable 简单参数应用

2013-07-18 00:00:00 by 【6yang】, 1123 visits, 收藏 | 返回

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>jQuery UI Sortable - Default functionality</title>
   <link rel="stylesheet" href="themes/base/jquery.ui.all.css">
   <script src="js/jquery-1.8.3.js"></script>
   <script src="js/jquery-ui.js"></script>
   <style>
   #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
   #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
   #sortable li span { position: absolute; margin-left: -1.3em; }
   .placeholder{ border:2px dotted #f30;     }
   </style>
   <script>
   $(function() {
       $( "#sortable" ).sortable({
           axis: 'y' ,
           cursor: 'move' ,
           dropOnEmpty: false ,
           forceHelperSize: true ,
           forcePlaceholderSize: true ,
           /*handle: 'span' ,*/
           items: 'li' ,
           opacity: 0.7 ,
           placeholder: 'placeholder' ,
           revert: false ,
           tolerance: 'pointer' ,
           update : function (e, ui){
               var arrTemp = [];
               var updatePanels = {};
               var result = $(this).sortable("toArray");
               var serial = $(this).sortable('serialize');


               /*for(var i=0, len = serial.length; i < len ; i++){
                   console.log(serial[i])
               }*/
               $.ajax({
                   url: "sort_menu.php",
                   type: "post",
                   data: serial,
                   error: function(){
                       //alert("theres an error with AJAX");
                   }
               });
           }
       });
   });
   </script>
</head>
<body>

<ul id="sortable">
   <li class="ui-state-default" id="i_1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
   <li class="ui-state-default" id="i_2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
   <li class="ui-state-default" id="i_3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
   <li class="ui-state-default" id="i_4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
   <li class="ui-state-default" id="i_5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
   <li class="ui-state-default" id="i_6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
   <li class="ui-state-default" id="i_7"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

<div class="demo-description">
<p>
   Enable a group of DOM elements to be sortable. Click on and drag an
   element to a new spot within the list, and the other items will adjust to
   fit. By default, sortable items share <code>draggable</code> properties.
</p>
</div>
</body>
</html>

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=1300&cid=7

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

jquery sortable 简单参数应用

图片原图