如何在可排序的软件包中制作标签add_rank_list函数反应性？

Question

在运行以下MWE代码时，用户将项目从左侧的面板拖到右侧的面板。请注意，当项目从左侧“拖动”面板中拖动时，列出的列表会耗尽。是否可以使这些列表元素（在 labels中定义= C（...）在下面的第一个 add_rank_list（）函数下面）反应性，以便列表永远不会在此示例中，耗尽，始终包含A，B，C，D，E，无论该项目被拖过了多少次？换句话说，用户每次将项目拖到右侧，观察者会被触发，并且再次生成A，B，C，D，E的同一列表？

这类似于可排序软件包中可用的克隆功能，除了我知道克隆不能使用更简单的 bucket_list（add_rank_list（...）） andtax使用。

MWE：

library(shiny)
library(sortable)   

ui <- fluidPage(htmlOutput("rankingForm"))

server <- function(input, output, session) {
  output$rankingForm <- renderUI({
    fluidRow(
      br(),
      column(tags$b("Ranking"), width = 12,
             bucket_list(header = "Drag items to the right panel:", 
                         group_name = "bucket_list_group", orientation = "horizontal",
                         add_rank_list("Drag from Pool:", 
                                       labels = c("A","B","C","D","E"), # make labels reactive?
                                       input_id = "rank_list_1"),
                         add_rank_list("Drag to:", labels = NULL,
                                       input_id = "rank_list_2"))
      )
    )
  })
}

shinyApp(ui=ui, server=server)

Answer 1

经过进一步的研究，似乎无法与简化函数 bucket_list（add_rank_list（...））一起使用克隆功能，但是当前必须与 sortable_js（... ）。更改允许在更简单的代码中允许使用“可排序软件包”开发人员的更改，请参见 https://github.com/rstudio/sortable/sissues/45 。

但是，通过下面列出的相关帖子，Stackoverflow用户群已经足够友好，可以通过 sortable_js（）来指导我解决问题。请参阅底部的“工作解决方案代码”。

相关解决方案帖子：
来自HTML/CSS的元素以及R数据框架？和
态订购编号为这个简单的可排序示例？

和一个重要链接解释克隆：

工作解决方案代码：

library(shiny)
library(sortable)
library(htmlwidgets)

icons <- function(x) {lapply(x,function(x){tags$div(tags$strong(x))})}

ui <- fluidPage(

# Below solution provided by I|O on Jun 1, 2022:  
  tags$head(
    tags$style(HTML('
      #drag_from > div {cursor: move; #fallback
                        cursor: grab; cursor: pointer;
                        }
      #drag_to > div {cursor: move; #fallback
                      cursor: grab; cursor: pointer;
                      }                
      #drag_to {list-style-type: none;  counter-reset: css-counter 0;}
      #drag_to > div {counter-increment: css-counter 1;}
      #drag_to > div:before {content: counter(css-counter) ". ";}
      ')
    )
  ),
  
  div(
    style = "margin-top: 2rem; width: 60%; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start;",

    div(
      div(
        class = "panel panel-default",
        div(class = "panel-heading", "Drag from here"),
        div(
          class = "panel-body",
          id = "drag_from",
          icons(c("A", "B", "C", "D", "E"))
        )
      ),
    ),
    div(
      div(
        class = "panel panel-default",
        div(class = "panel-heading", "Drag to here"),
        div(
          class = "panel-body",
          id = "drag_to"
        )
      )
    )
  ),
  sortable_js(
    "drag_from",
    options = sortable_options(
      group = list(
        pull = "clone",
        name = "group1",
        put = FALSE
      )
    )
  ),
  sortable_js(
    "drag_to",
    options = sortable_options(
      group = list(
        group = "group1",
        put = TRUE,
        pull = TRUE
      ),
      onSort = sortable_js_capture_input(input_id = "selected") # << solution by stefan on Jun 01, 2022
    )
  ),
  helpText(h5(strong("Output to table:"))),
  tableOutput("table1")
)

server <- function(input, output) {
  output$table1 <- renderTable({input$selected})
}

shinyApp(ui, server)