A simple example of drag-and-drop sorting is achieved by sortable in Jquery-ui _jquery

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.