运行可排序软件包时如何补充存储库列表？

Question

我正在探索如何可视化数学过程（一系列顺序计算）的方法，并且可排序的软件包可能是通过修改的答案。以下可再现的代码是从如何在线找到可排序及其参考手册的基本示例中获取的（添加了表输出，因此我可以开始操纵数据框架）。

我试图查看是否有一种方法可以不耗尽存储库列表，因为用户从左图中拖动并掉落（在我的示例中标记为“池”）到右面板（在我的示例中标记为“池排名”）。因此，查看底部的图像，用户可以根据需要拖动/删除项目A，B，C，D，E。然后，由于拖动/掉落的元素的重复，右“拖动到”面板的增长大于“拖动”面板的更长。

这可以分类吗？怎么办？还是我应该看其他软件包？

如果我能弄清楚这一点，我的下一步将是添加来自数学公式面板的另一个“拖动”，以在拖动到标签元素的右侧拖动A -E。

可重复可重复的代码：

library(shiny)
library(sortable)   

ui <- 
  fluidPage(
    tags$head(tags$style(HTML("
      .column_2 {
        counter-reset: rank;                      
      }

      .column_2 .rank-list-item::before {
        counter-increment: rank;                   
        content: counter(rank) '. ';    
      }
    "))),
    htmlOutput("rankingForm"),
    helpText(h5(strong("Output to table:"))),
    tableOutput("table1")
  
)

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

shinyApp(ui=ui, server=server)

Answer 1

通过这些列出的stackoverflow帖子和解决方案，我到达了底部显示的“工作解决方案”：

相关帖子：

vladimir_orbucina请求， https://github.com/rstudio/sortable/sorsues/45 和
来自HTML/CSS的元素以及R数据框架？和
如何使可排序的包中的标签add_rank_list函数反应？和
态将编号订购到这个简单的可排序示例？

和一个重要链接来解释克隆： https://rstudio.github.io/sortable/articles/cloning.html

工作解决方案：

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)