php – jquery ui – 利用sortable()來排序
利用sortable()來做排序效果
網頁a.php是使用者端，使用者可自行排序後按下按鈕，儲存排序的結果
網頁ajax.php是用來儲存的伺服器端
很簡單，好上手！
a.php
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
{ margin : 0; padding : 0; }
/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size : 100%; }
/* Removes list-style from lists */
ol,ul { list-style : none; }
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var
{ font-style : normal; font-weight : normal; }
/* Removes list-style from lists */
table { border-collapse : collapse; border-spacing : 0; }
/* Removes border from fieldset and img */
fieldset,img { border : 0; }
/* Left-aligns text in caption and th */
caption,th { text-align : left; }
/* Removes quotation marks from q */
q:before, q:after { content :''; }
ul { float:left; width:300px; height:}
li { background:#CCC; padding:10px; margin:10px; width:50px; float:left;}
</style>
<script>
$(function (){
// 儲存排序
//
// @selector 指定要排序的父元素
// @child_selector 要排序的子元素
// @send_selector綁定的送出元素
// @ajaxurl AJAX送出的網址
// AJAX 成功後會呼叫 success_sequence_table(data)
function sequence_table(selector, child_selector, send_selector, ajaxurl) {
$(selector).sortable();
$(send_selector).on("click", function (){
var urstring = "";
$(child_selector).each(function(index, element) {
//唯一編號
var id = $(this).attr("data-id");
//目前的排序
var seq = index + 1;
urstring = urstring + "&" + id + "=" + seq;
});
console.log(urstring);
$.post(ajaxurl, {
'querystring' : urstring
}, function (data) {
success_sequence_table(data)
})
});
}
//可自行定義
function success_sequence_table(data) {
alert(data)
}
sequence_table("ul", "li", "button", "ajax.php");
})
</script>
<ul>
<li data-id="1">1.美語</li>
<li data-id="2">2.日文</li>
<li data-id="3">3.俄文</li>
<li data-id="4">4.德文</li>
<li data-id="5">5.法文</li>
<li data-id="6">6.奧文</li>
<li data-id="7">7.義文</li>
<li data-id="8">8.英文</li>
<li data-id="9">9.中文</li>
</ul>
<button type="button">GO</button>
ajax.php
<? /* * * 如 2=1&1=2&3=3 * 代表 編號2的排序是1 * 編號1的排序是2 * 編號3的排序是3 * */ //過濾前後符號 $querystring = $_POST['querystring']; $querystring = trim($querystring, "? "); $querystring = trim($querystring, "& "); parse_str($querystring, $data); print_r($data); ?>