<strong><font style="COLOR: #ff0000">1:排序(Sortable)元件可以將頁面上的一組元素變成可排序的</font></strong>,可用於定義一個可排序的元素列表,然後,透過拖曳滑鼠可以調整元素在列表中的位置<br><font style="COLOR: #0000ff">$('.selector').sortable(options);</font> <br><strong>簡單實例:<br></strong><div class="codetitle"> <span> <a style="CURSOR: pointer" data="83501" class="copybut" id="copybut83501" onclick="doCopy('code83501')"><u>複製代碼</u></a></span> 代碼如下:</div> <div class="codebody" id="code83501"> <br>ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><br><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br><title>sortable元件</title> <br><script language="javascript" src="js/jquery-1.4.2.min.js"></script><br><script type="text/javascript" src="js/jquery.ui.core.js">< /script><BR><script type="text/javascript" src="js/jquery.ui.widget.js"></script><br><script type="text/javascript" src="js/%20jquery.ui.mouse.js"></script><br><script type="text/javascript" src="js/jquery.ui.sortable.js"></script><br><link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css"> <br><style type="text/css"><BR>body {<BR> text- align:center;<BR> margin:0 auto;<BR> padding:0;<BR>}<BR>#wrap {<BR> margin: 10px auto 10px auto;<BR> margin: 10px auto 10px auto;<BR> margin: 10px auto 10px auto;<> : 450px;<BR> height:300px;<BR> background: #fff;<BR> border: 5px solid #000;<BR>}<BR>h1 {<BR>6color:<BR>}<BR>h1 {<BR>6-color:< size:24px;<BR> font-weight:bold;<BR> margin-bottom:2px;<BR> text-align:center;<BR>}<BR>#sortable {<BR> list-style-type: none;<BR> margin: 0;<BR> padding: 0;<BR> width: 100%;<BR>}<BR>#sortable li {<BR> margin: 3px;<BR>#sortable li {<BR> margin: 3px;<BR>#sortable li {<BR> margin: 3px;<BR> <BR> font-size: 16px;<BR> height: 18px;<BR>}<BR>#sortable li span {<BR> position: absolute;<BR> margin-left:1.3em}; <BR></style> <br><script type="text/javascript"><BR> $(document).ready(function(){<BR> $("#sortable").sortable(); / /將sortable變成可排序的<BR> $("#sortable").disableSelection(); //使文字無法選取<BR> });<BR></script><br> <br><br><div id="wrap"> <br> <h1>拖曳滑鼠調整下列選項的順序</h1> <br> <ul id="sortable"> <br> 星期一<br> <li class="ui-widget-content">星期二</li> <br> <li class="ui-widget-content ">星期三</li> <br> <li class="ui-widget-content">星期四</li> <br> <li class="ui-widget-content">星期五</li> <br> <li class="ui-widget-content">星期六</li> <br> <li class="ui-widget-content">星期七</li> </ul> </div> <br> div><strong>身體><br></strong><img alt="" src="http://files.jb51.net/file_images/article/201306/2013061916300628.png"><br><strong>效果圖:<font style="max-width:90%"><br> </font></strong><br><div class="codetitle"><span><a style="CURSOR: pointer" data="75215" class="copybut" id="copybut75215" onclick="doCopy('code75215')"><u></u> :關聯排序列表</a></span></div>通常將兩個以上的列表同時進行排序稱為關聯排序列表,利用屬性connectWidth屬性設定一個選擇符,這樣就可以指定在不同的列表之間移動元素的順序複製程式碼 程式碼如下:<div class="codebody" id="code75215"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br><title>sortable组件</title><br><script language="javascript" src="js/jquery-1.4.2.min.js"></script><br><script type="text/javascript" src="js/jquery.ui.core.js"></script><br><script type="text/javascript" src="js/jquery.ui.widget.js"></script><br><script type="text/javascript" src="js/jquery.ui.mouse.js"></script><br><script type="text/javascript" src="js/jquery.ui.sortable.js"></script><br><link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /><br><style type="text/css"><br>.message_box {<br> width:180px;<br> height:200px;<br> filter:dropshadow(color=#666666, offx=3, offy=3, positive=2);<br> float:left;<br> margin-right:10px;<br>}<br>#mask {<br> position:absolute;<br> top:0;<br> left:0;<br>width:expression(body.clientWidth);<br>height:expression(body.clientHeight);<br> background:#666;<br> filter:ALPHA(opacity=60);<br> z-index:1;<br> visibility:hidden<br>}<br>.message {<br> border:#036 solid;<br> border-width:1 1 3 1;<br> width:95%;<br> height:95%;<br> color:#036;<br> font-size:12px;<br> line-height:150%;<br> background:#FFF<br>}<br>.header {<br> background:#036;<br> height:22px;<br> font-family:Verdana, Arial, Helvetica, sans-serif;<br> font-size:12px;<br> padding:3px 5px 0px 10px;<br> color:#fff;<br> cursor:move;<br>}<br>ul {<br> margin-left:10px;<br> margin-right:10px;<br> background: #eee;<br> padding: 5px;<br> width: 150px;<br>}<br>li {<br> font-size:14px;<br>}<br>.header div {<br> display:inline;<br> width:150px;<br>}<br>.header span {<br> float:right;<br> display:inline;<br> cursor:hand;<br>}<br>.file, .folder {<br> width: 60px;<br> float: left;<br> margin-right: 10px;<br>}<br>.file em, .folder em {<br> clear: both;<br> font-size: 12px;<br> font-style: normal;<br> text-decoration: underline;<br>}<br>.droppable {<br> height:200px;<br> overflow: auto;<br>}<br>#res {<br> clear:both<br>}<br></style><br><script type="text/javascript"><br>$(document).ready(function(){<br> var msg = "";<br> function callback(e, ui) { <br> if (e.type == "sortstart") {<br> msg = "你选择了游戏:" + ui.item.text();<br> $("#res").empty();<br> } else if (e.type == "sortremove") {<br> msg += ",从列表" + e.target.id;<br> } else if (e.type == "sortreceive") {<br> msg += "移至列表" + e.target.id + "。";<br> } else if (e.type == "sortstop") {<br> $("#res").append(msg);<br> }<br> }<br> $("ul").sortable({ <br> connectWith: "ul",<br> start: callback,<br> remove: callback,<br> receive: callback,<br> stop: callback<br> }).disableSelection();<br> $("#sortable2").sortable({ "dropOnEmpty":false});<br>});<br></script><br></head><br><body><br><div id="message_box1" class="message_box" ><br> <div class="message" ><br> <div class="header"><br> <div>休闲类小游戏</div><br> <span>×</span></div><br> <ul id="sortable1"><br> <li>菠萝蛋糕 </li><br> <li>人品计算器 </li><br> <li>我的恐怖小屋</li><br> <li>品茗闻香话茶道 </li><br> <li>暴打火柴人中文版</li><br> </ul><br> </div><br></div><br><div id="message_box1" class="message_box" ><br> <div class="message" ><br> <div class="header"><br> <div>动作类小游戏</div><br> <span>×</span> </div> <br> <ul id="sortable2"> <br> <li>奧特曼之狼人傳說</li> <br> 戰鬥機<br> <li>月蝕之刃</li> <br> <li>終極拳皇</li> <br> ul><br> </ul> </div> <br><br><div id="message_box1" class="message_box"> <br> <div class="message"> <br> <divdivclass><br> <div>精品遊戲</div> <br> <span>×</span></divdivclass> </div> <br> <ul id="sortable3"> <br> </ul> </div> <br><br><div id="res"></div> <br>