1. Introduction of documents
<script src= "{sh::P ub}js/jquery-1.10.1.min.js" ></script>
<link rel= "stylesheet" href= "public/" Css/jquery-ui.min.css ">
<script src=" {sh::P ub}js/jquery-ui.min.js "></script>
2. Attach the sortable class to the element
<tbody class= "sortable" >
<tr></tr>
<tr></tr>
</tbody>
3. Open and configure
$ (function () {
$ (". Sortable"). Sortable ({
cursor: "Move",
items: "tr",//Only TR can drag
opacity:0.6,//drag when , transparency for 0.6
revert:true,//release, add animation
update:function (event, UI) {//update sort after
var categoryids = $ (this). sortable ("ToArray");
var $this = $ (this);
$.ajax ({
URL: ' {sh::u (' agentgoods/ajax ', ' Todo=categorydragsort ')} ',
type: ' POST ',
data: ' Categoryids= ' + categoryids,
success:function (JSON) {
if (json = = 1) {
layer.msg (' Move succeeded ', {
icon:1< c17/>});
else {
$this. Sortable ("Cancel");
Layer.msg (' move failed ', {
icon:2});}}}
)
; $ (". Sortable"). Disableselection ();
4. Background processing
$categoryids = $this->_post (' categoryids ');
$CATEGORYIDSARR = Explode (",", $categoryids);
foreach ($categoryidsArr as $k => $v) {
$data [' sort '] = count ($CATEGORYIDSARR)-$k;
$data [' id '] = $v;
M (' agentgoods_category ')->where (array (' ID ' => $v))->save ($data);
}
Exit (' 1 ');
Summary: This sort, not the exchange, but the complete overall adjustment
The above article through the Jquery-ui sortable to achieve drag-and-drop sort of simple example is a small series to share all the content, hope to give you a reference, but also hope that we support cloud habitat community.