js 实现在指定类名dom下第一层子节点可拖拽排序，不是指定类名下的dom不可以拖拽排序

可以使用原生的 JavaScript 实现该功能。可以遍历指定类名的 dom 节点，然后给每个节点添加拖拽事件，以实现拖拽排序的功能。具体实现步骤如下：

1. 获取指定类名的 dom 节点，并将其转化为数组形式。
2. 给每个节点添加 draggable 属性，并将其值设置为 true，以启用拖拽功能。
3. 给每个节点添加 dragstart 和 dragover 事件，以实现拖拽排序的功能。在 dragstart 事件中，记录当前拖拽的节点的索引。在 dragover 事件中，获取当前拖拽的节点和目标节点的索引，并交换它们的位置。
4. 在 dragend 事件中，重新排列节点的顺序，并更新页面上的显示。

下面是一份基本的代码实现：

// 获取指定类名的 dom 节点
const doms = Array.from(document.querySelectorAll('.class-name'));

// 给每个节点添加 draggable 属性
doms.forEach(dom => {
  dom.draggable = true;
});

// 记录当前拖拽的节点的索引
let dragIndex = 0;

// 给每个节点添加 dragstart 事件
doms.forEach((dom, index) => {
  dom.addEventListener('dragstart', e => {
    dragIndex = index;
  });
});

// 给每个节点添加 dragover 事件
doms.forEach((dom, index) => {
  dom.addEventListener('dragover', e => {
    e.preventDefault();
    const dropIndex = index;
    if (dragIndex !== dropIndex) {
      // 交换节点的位置
      const parentNode = dom.parentNode;
      const dragDom = parentNode.children[dragIndex];
      const dropDom = parentNode.children[dropIndex];
      parentNode.insertBefore(dragDom, dropDom);
    }
  });
});

// 在 dragend 事件中重新排列节点的顺序
document.addEventListener('dragend', e => {
  doms.forEach((dom, index) => {
    dom.style.order = index;
  });
});