最好用的jquery列表拖动排列(由项目提取)
代码压缩包下载: http://pan.baidu.com/s/1mgxAIy0
代码一预览:
<!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>
谢谢关注websites博客!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。