最好的jquery列表拖動排列自訂拖動層排列
代碼一預覽:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>最好的jquery列表拖動排列自訂拖動層排列</title><meta name="description" content="jquery列表模組拖動層，當點擊或拖動列表時，可以自訂隨意拖放列表模組到相應位置。支援回呼函數的拖動層。" /><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="js/jquery.dragsort-0.4.min.js"></script><style type="text/css">*{margin:0;padding:0;list-style-type:none;}body{font-family:Arial;font-size:12pt;color:#333;}h1{font-size:16pt;}h2{font-size:13pt;}/* demo */.demo{padding:20px;width:800px;margin:20px auto;border:solid 1px black;}.demo h2{margin:30px 0 20px 0;color:#3366cc;}/* dragfunction */.dragfunction{margin:40px 0 0 0;}.dragfunction dt{height:30px;font-weight:800;}.dragfunction dd{line-height:22px;padding:0 0 20px 0;color:#5e5e5e;}/* dragsort */.dragsort-ver li{height:30px;line-height:30px;}.dragsort{width:350px;list-style-type:none;margin:0px;}.dragsort li{float:left;padding:5px;width:100px;height:100px;}.dragsort div{width:90px;height:50px;border:solid 1px black;background-color:#E0E0E0;text-align:center;padding-top:40px;}.placeHolder div{background-color:white!important;border:dashed 1px gray!important;}</style></head><body><div class="demo"><h1>jQuery列表拖動排列示範</h1><h2>簡單的一組列表:</h2><ul class="dragsort-ver"><li>你猜</li><li>你不猜</li><li>你不猜你不猜</li><li><input type="checkbox" name="intro_fields[]" value="猜猜"/>猜猜</li><li>你猜不猜</li><li>你猜不猜不猜</li><li>你不猜不猜</li></ul><br/><script type="text/javascript">$("ul:first").dragsort();</script><h2>兩組列表拖放:(無限組拖放)</h2><ul class="dragsort" id="list2" style="float:right;"><li><div>10</div></li><li><div>11</div></li><li><div>12</div></li><li><div>13</div></li><li><div>14</div></li><li><div>15</div></li><li><div>16</div></li><li><div>17</div></li><li><div>18</div></li></ul><ul class="dragsort" id="list1"><li><div>1</div></li><li><div>2</div></li><li><div>3</div></li><li><div>4</div></li><li><div>5</div></li><li><div>6</div></li><li><div>7</div></li><li><div>8</div></li><li><div>9</div></li></ul><!-- 排序儲存在這裡可以檢索伺服器上的回傳 --><input name="list1SortOrder" type="hidden" /><script type="text/javascript">$("#list1, #list2").dragsort({dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>",scrollSpeed: 5});function saveOrder() {var data = $("#list1 li").map(function(){return$(this).children().html();}).get();$("input[name=list1SortOrder]").val(data.join("|"));};</script><div style="clear:both;"></div><h2>Usage</h2>$("ul").dragsort({ dragSelector: "li", dragEnd: function() { }, dragBetween: false, placeHolderTemplate: "<li></li>" });<br/><br/><dl class="dragfunction"><dt>dragSelector</dt><dd>CSS選取器內的元素的清單項目的拖動手柄。預設值是“li”。</dd><dt>dragSelectorExclude</dt><dd>CSS選取器的元素內的dragSelector不會觸發dragsort的。預設值是"input, textarea, a[href]"。</dd><dt>dragEnd</dt><dd>拖動結束後將被調用的回呼函數.</dd><dt>dragBetween</dt><dd>設定為“true”，如果你要啟用多組列表之間拖動選定的列表。 預設值是false。</dd><dt>placeHolderTemplate</dt><dd>拖動列表的HTML部分。預設值是"<li></li>".</dd><dt>scrollContainer</dt><dd>CSS選取器的元素，作為滾動容器，例如溢出的div設定為自動。 預設值是“視窗“.</dd><dt>scrollSpeed</dt><dd>一個數字，它代表了速度，頁面拖動某一項時，將滾動容器外，較高使用價值的是速度和較低的值是較慢的。 如果設定為"0"以禁用滾動。預設值是"5".</dd></dl></div></body></html>
代碼2預覽:
<!DOCTYPE html><html> <head> <title>jQuery UI sortable()實現拖動排序</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://tool.phpddt.com/resources/js/jquery-1.7.2.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> </head> <body> <script> $(function() { $( ".sortable" ).sortable({ cursor: "move", items :"li", //只是li可以拖動 opacity: 0.6, //拖動時，透明度為0.6 revert: true, //釋放時，增加動畫 update : function(event, ui){ //更新排序之後 alert($(this).sortable("toArray")); } }); }); </script> <ul class="sortable"> <li class="ui-state-default" id="1">第1項</li> <li class="ui-state-default" id="2" >第2項</li> <li class="ui-state-default" id="3">第3項</li> </ul> </body></html>
代碼壓縮包下載: http://pan.baidu.com/s/1mgxAIy0
謝謝關注websites部落格!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
