使用 jsTree 拖放层次结构树时如何重新排序顺序编号？

【问题标题】：How to reorder sequential numbering when using drag and drop with a jsTree for a hierarchy tree?使用 jsTree 拖放层次结构树时如何重新排序顺序编号？
【发布时间】：2022-06-11 14:38:57
【问题描述】：

我正在尝试为从一个层次结构树节点拖入（复制）到另一个节点的元素生成顺序编号，同时为用户提供在目标节点中放置元素的位置的选项。顺序编号应反映元素的目标节点顺序，如本文底部的插图所示。可重现的代码如下。有关如何执行此操作的任何建议？

请注意，为了代码简洁，我删除了一些非常好的功能。但是，当我完成对 jsTreeR 包的探索后，我会发布整个内容，以便用户可以看到完整的好处。

这是How to pull specific node elements from a jsTree into an R data frame?的后续帖子

可重现的代码：

library(jsTreeR)
library(shiny)

nodes <- list(
  list(
    text = "Menu",
    state = list(opened = TRUE),
    children = list(
      list(
        text = "A",
        type = "moveable",
        state = list(disabled = TRUE)
      ),
      list(
        text = "B",
        type = "moveable",
        state = list(disabled = TRUE)
      )
    )
  ),
  list(
    text = ">>> Drag here <<<",
    type = "target",
    state = list(opened = TRUE)
    )
)

checkCallback <- JS(
  "function(operation, node, parent, position, more) { ",
  "  if(operation === 'copy_node') {",
  "    if(parent.id === '#' || node.parent !== 'j1_1' || parent.type !== 'target') {",
  "      return false;", # prevent moving an item above or below the root
  "    }",               # and moving inside an item except a 'target' item
  "  }",
  "  if(operation === 'delete_node') {",
  "    Shiny.setInputValue('deletion', position + 1);",
  "  }",
  "  return true;",      # allow everything else
  "}"
)

dnd <- list(
  always_copy = TRUE,
  is_draggable = JS(
    "function(node) {",
    "  return node[0].type === 'moveable';",
    "}"
  )
)

mytree <- jstree(
  nodes, dragAndDrop = TRUE, dnd = dnd, checkCallback = checkCallback,
  types = list(moveable = list(), target = list())
)

script <- '
$(document).ready(function(){
  $("#mytree").on("copy_node.jstree", function(e, data){
    var instance = data.new_instance;
    var node = data.node;
    var id = node.id;
    var index = $("#"+id).index() + 1;
    var text = index + ". " + node.text;
    Shiny.setInputValue("choice", text);
    instance.rename_node(node, text);
  });
});
'

library(shiny)
ui <- fluidPage(
  tags$head(tags$script(HTML(script))),
  fluidRow(
    column(width = 4,jstreeOutput("mytree")),
    column(width = 8,verbatimTextOutput("choices"))
  )
)

server <- function(input, output, session){
  output[["mytree"]] <- renderJstree(mytree)
  Choices <- reactiveVal(data.frame(choice = character(0)))
  observeEvent(input[["choice"]],{Choices(rbind(Choices(),data.frame(choice = input[["choice"]])))})
  observeEvent(input[["deletion"]], {Choices(Choices()[-input[["deletion"]], , drop = FALSE])})
  output[["choices"]] <- renderPrint({Choices()})
}

shinyApp(ui, server)

插图：

编辑以响应第一条评论，以便用户只能拖动/复制到“拖动此处”节点的最后位置：

可复现的代码（OP 的 2 个新增内容用 # cmets 标记）：

nodes <- list(nodes <- list(
  list(
    text = "Menu",
    state = list(opened = TRUE),
    children = list(
      list(
        text = "A",
        type = "moveable",
        state = list(disabled = TRUE)
      ),
      list(
        text = "B",
        type = "moveable",
        state = list(disabled = TRUE)
      ),
      list( # ADDED A 3rd ELEMENT
        text = "C",
        type = "moveable",
        state = list(disabled = TRUE)
      )
    )
  ),
  list(
    text = ">>> Drag here <<<",
    type = "target",
    state = list(opened = TRUE)
  )
)

checkCallback <- JS(
  "function(operation, node, parent, position, more) { ",
  "  if(operation === 'copy_node') {",
  "    if(parent.id === '#' || node.parent !== 'j1_1' || parent.type !== 'target') {",
  "      return false;", 
  "    }",               
  "  }",
  "  if(operation === 'delete_node') {",
  "    Shiny.setInputValue('deletion', position + 1);",
  "  }",
  "  return true;",      
  "}"
)

dnd <- list(
  always_copy = TRUE,
  inside_pos = "last", # ADDED LAST POSITION
  is_draggable = JS(
    "function(node) {",
    "  return node[0].type === 'moveable';",
    "}"
  )
)

mytree <- jstree(
  nodes, dragAndDrop = TRUE, dnd = dnd, checkCallback = checkCallback,
  types = list(moveable = list(), target = list())
)

script <- '
$(document).ready(function(){
  $("#mytree").on("copy_node.jstree", function(e, data){
    var instance = data.new_instance;
    var node = data.node;
    var id = node.id;
    var index = $("#"+id).index() + 1;
    var text = index + ". " + node.text;
    Shiny.setInputValue("choice", text);
    instance.rename_node(node, text);
  });
});
'

library(shiny)
ui <- fluidPage(
  tags$head(tags$script(HTML(script))),
  fluidRow(
    column(width = 4,jstreeOutput("mytree")),
    column(width = 8,verbatimTextOutput("choices"))
  )
)

server <- function(input, output, session){
  output[["mytree"]] <- renderJstree(mytree)
  Choices <- reactiveVal(data.frame(choice = character(0)))
  observeEvent(input[["choice"]],{Choices(rbind(Choices(),data.frame(choice = input[["choice"]])))})
  observeEvent(input[["deletion"]], {Choices(Choices()[-input[["deletion"]], , drop = FALSE])})
  output[["choices"]] <- renderPrint({Choices()})
}

shinyApp(ui, server)

现在对尝试将添加的元素引导到最后一个位置的问题进行说明：

【问题讨论】：

• 恐怕这是不可能的，或者非常复杂。用户可以删除。我想到了一个可能的替代方案：防止用户掉到最后一个位置以外的其他地方

标签： r shiny jstree jstree-dnd jstreer