如何使用jsTreeR为拖入层级节点的元素添加顺序编号

你之前在sortable中验证可用的CSS计数器方案完全可以直接适配jsTreeR，不需要修改现有拖拽逻辑，两步就能实现需求：

• 适配jsTreeR的DOM结构编写CSS计数器规则
  jsTreeR渲染的节点统一使用.jstree-node类，子节点列表容器为.jstree-children，你只需要先给"Drag here"目标节点绑定固定id，就能精准给该节点下的直接子元素挂载计数器：

  /* 初始化计数器，绑定到目标放置区的子节点容器 */
  #target-drop-area > .jstree-children {
    counter-reset: op-order;
    list-style: none;
    padding-left: 2rem;
  }
  /* 遍历每个子节点时计数器自增 */
  #target-drop-area > .jstree-children > .jstree-node {
    counter-increment: op-order;
  }
  /* 在节点文本前插入生成的序号 */
  #target-drop-area > .jstree-children > .jstree-node > .jstree-anchor::before {
    content: counter(op-order) ". ";
    color: #2d3748;
    font-weight: 600;
    margin-right: 4px;
  }
  

• 初始化树时绑定目标节点id、注入样式和校验规则
  定义树结构时给"Drag here"节点加a_attr参数绑定固定id，直接通过jsTreeR的css参数注入上面写的样式，再加简单的回调限制只能往目标区放置节点即可，完整可运行示例：

  library(jsTreeR)
  
  # 可拖拽的运算菜单节点
  op_menu <- list(
    text = "Menu",
    state = list(opened = TRUE),
    children = lapply(
      c("加法", "减法", "乘法", "除法", "幂运算", "对数运算"),
      \(op) list(text = op, type = "math_op")
    )
  )
  
  # 目标放置区节点，绑定固定id
  drop_zone <- list(
    text = "Drag here",
    a_attr = list(id = "target-drop-area"),
    state = list(opened = TRUE),
    children = list()
  )
  
  # 渲染树
  jstree(
    nodes = list(op_menu, drop_zone),
    dragAndDrop = TRUE,
    dnd = list(copy = TRUE, always_copy = TRUE),
    types = list(math_op = list(icon = "fa fa-calculator")),
    # 限制节点只能放到目标区
    checkCallback = JS("function(op, node, parent) {
      if (op === 'copy_node' || op === 'move_node') {
        return parent.a_attr && parent.a_attr.id === 'target-drop-area'
      }
      return TRUE
    }"),
    # 注入自动编号的CSS
    css = '
    #target-drop-area > .jstree-children {
      counter-reset: op-order;
      list-style: none;
      padding-left: 2rem;
    }
    #target-drop-area > .jstree-children > .jstree-node {
      counter-increment: op-order;
    }
    #target-drop-area > .jstree-children > .jstree-node > .jstree-anchor::before {
      content: counter(op-order) ". ";
      color: #2d3748;
      font-weight: 600;
      margin-right: 4px;
    }
    '
  )
  

该方案依赖浏览器原生CSS计数器能力，不需要手动维护序号变量，不管是新增、删除、拖拽调整节点顺序，序号都会自动连续重排，不会出现断号、错号问题。如果需要把序号同步到节点的实际文本值用于后续逻辑处理，只要监听copy_node.jstree、move_node.jstree、delete_node.jstree事件，在回调里读取计数器值更新节点text属性即可。

内容的提问来源于stack exchange，提问作者Curious Jorge - user9788072