在正文的第一句加入“我正在参加 码上掘金体验活动，详情：show出你的创意代码块”

前言

排序是我们在数据处理中常常要用到的功能，但是对于默认的排序总会觉得不符合个人的使用习惯，想要自定义排序。本文那怎么用前段实现标签的上下移动功能呢。

代码

正文

HTML标签框架很简单只需要一个div标签就行了，主要是后续的数据的动态添加和控制的实现。

1.动态添加数据

var arr = [1, 2, 3, 4, 5]

for (let i = 0; i < arr.length; i++) {
  var node = document.createElement("ul");
  var textnode = document.createTextNode(arr[i] + " ");
  var btn_up = document.createElement("button")
  btn_up.setAttribute("class", "up")
  var btn_down = document.createElement("button")
  btn_down.setAttribute("class", "down")
  node.appendChild(textnode);
  node.appendChild(btn_up)
  node.appendChild(btn_down)
  document.getElementById("app").appendChild(node);
}

定位到HTML的div标签，然后添加子标签，动态填充数组里面的数据。每个数据后面再添加两个按钮，用于控制标签的上下移动。

$('.up').html("上移")
$('.down').html("下移")
$(function () {
  $('.up').on('click', function () {
    var current = $(this).parent();
    var prev = current.prev();
    if (current.index() > 0) {
      current.insertBefore(prev);
    }
  });
  $('.down').on('click', function () {
    var current = $(this).parent();
    var next = current.next();
    if (next) {
      current.insertAfter(next);
    }
  });
});

给按钮增加文本之后就给按钮添加动作响应了。 当向上按钮被按下，首先获取向上按钮的父节点（本例中是ul变迁），然后将当前标签插入前面一个标签的前面。有点绕口，也就是移动整个标签（包括文本和按钮）。当然如果过标签已经是第一个标签了，就不需要做任何事了，当然此处也可以弹出一个已经是第一个不能再上移的提示框。同样向下按钮被按下时，整个标签会下移。

至此就实现了简单的标签的上下移动。

总结

作为初学者，本文只能说有一定的启发作用，更多更有趣更功能还需要集思广益靠大家。