js 实现拖拽排序

在页面设计中，我们常常需要使用拖拽排序功能，以方便用户对页面中的元素进行重新排序。本文将介绍如何使用jQuery实现拖拽排序功能。

首先，我们需要在页面中引入jQuery库。在引入jQuery库之后，我们需要定义一个变量n，用来保存表格中的行数。

```javascript
var n = $('#Count').text()-1;
```

接着，在页面加载完成后，我们需要创建一个ol元素，并为其添加类名“sortable”。然后，遍历表格中的每一行数据，获取当前行第一列的文本内容，并将其添加到li元素中，并将li元素添加到ol元素中。

```javascript
window.onload = function() { 
  var ol = $("<ol>").addClass("sortable");
  $(".mrQuestionTable tr").each(function() {
    var text = $(this).find("td:first-child .mrQuestionText").text();
    ol.append($("<li>").text(text).addClass("my-class"));
  });
  $(".mrQuestionTable").after(ol);
  $(".mrQuestionTable").hide()
}
```

接下来，我们需要为.ol元素设置可排序属性，并在拖拽结束时触发回调函数。在回调函数中，重新计算每个元素的data-rank值，并将其添加到li元素中。同时，判断输入框中的值是否符合要求，如果不符合则清空输入框。最后，遍历表格中的每一行数据，查找与当前行匹配的列表项，并设置相应的下拉框选项。

```javascript
$(function() {
  $('.sortable').sortable({
    update: function(event, ui) {
      $('.sortable li').each(function(index) {
        if (index <= n) {
          $(this).attr('data-rank', index + 1);
          $(this).css("background-color", "rgb(32,52,60,0.5)");
        } else {
          $(this).attr('data-rank', '');
          $(this).css("background-color", "");
        }
      });
      if ($("#custom-item-input").val()!="" ) {
        let num = parseInt($("#custom-item-input").parent().attr('data-rank'));
        if (num!= 1 && num != 2 && num != 3) {
          $("#custom-item-input").val('');
        }
      }
      $(".mrQuestionTable tr").each(function() {
        var flagt=$(this).find("td:first-child .mrQuestionText");
        $(".sortable").find("li").each(function() {
          var rank = $(this).attr("data-rank");
          if ($(this).text()==flagt.text()) {
            flagt.parent().parent().find("td select").val("__"+rank);
          }
        });
      });
    }
  });
});
```

以上就是使用jQuery实现拖拽排序功能的全部代码。通过以上代码，我们可以轻松地实现页面元素的拖拽排序功能，提高了页面的交互性和用户体验。