JQuery之拖拽并排序

1、依赖于 jquery，需要先引入 jquery

下载链接：https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js

2、依赖于 jquery-ui.js 插件

下载链接：http://code.jquery.com/ui/1.10.3/jquery-ui.js

3、开始使用

//////////////////////////////////////开始调用排序的方法
function againSortLI(){
  //A-1、左边之题目类型的排序
  $(".mdc_mrtpm_Left .paper-section").each(function(index){
    var newNum = Number(index) + Number(1);
    var newNumText = tools.convertToChinese(newNum);

    //1 2 3 4 5...
    $(this).attr("n_m",newNum);
    //一 二 三 四 五...
    $(this).find(".paper-type-order").html(newNumText+"、");
  });
  //A-2、左边之题目的阿拉伯数字的排序：1 2 3 4 5...
  var leftLiLength = $(".mdc_mrtpm_Left .paper-section-li").length;
  for(var li = 0; li < leftLiLength; li++){
    var li_Num = Number(li) + Number(1);
    $(".mdc_mrtpm_Left li.paper-section-li:eq("+li+")").attr("e_n_m",li_Num);
    $(".mdc_mrtpm_Left li.paper-section-li:eq("+li+") .q-tit-seqNum").html(li_Num);
  }


  //B-1、右边之题目类型的排序
  $(".mdc_mrtpm_Right .edit-mc-item").each(function(index){
    var newNum = Number(index) + Number(1);
    var newNumText = tools.convertToChinese(newNum);
    //题目类型的阿拉伯数字：1 2 3 4 5...
    $(this).attr("n_m",newNum);
    //题目类型的中文数字：一 二 三 四 五...
    $(this).find(".mrtpm_queNum").html(newNumText+"、");
  });
  //B-2、左边之题目的阿拉伯数字的排序：1 2 3 4 5...
  var rightLiLength = $(".mdc_mrtpm_Right .J_drag_grid").length;
  for(var ri = 0; ri < rightLiLength; ri++){
    var ri_Num = Number(ri) + Number(1);
    $(".mdc_mrtpm_Right li.J_drag_grid:eq("+ri+")").attr("e_n_m",ri_Num);
    $(".mdc_mrtpm_Right li.J_drag_grid:eq("+ri+")").html(ri_Num);
  }
}

//////////////////////////////////////开始拖拽
$(".mdc_mrtpm_Left .paper-section-ul").sortable({
  cursor: "move",
  items :"li",                //只是li可以拖动
  opacity: 0.6,               //拖动时，透明度为0.6
  revert: true,              //释放时，增加动画
  update : function(){       //更新排序之后
    againSortLI();
  }
});

效果图：

未拖拽之前的图片
拖拽过的图片