在 R Shiny 中，如何使用 sortable js 将它出现在列表中的顺序次数附加到每个列表元素？

Question

下面的可重现代码适用于将元素从一个面板拖到另一个面板，并且在“拖到”面板中自动使用 HTML/CSS，对拖入的每个元素进行排序编号。

但是，我现在正尝试在每个“拖到”列表元素的末尾追加（我假设使用某种形式的 paste0(...)）该元素出现的次数的字母等效项“拖到”列表，如底部所示。这是怎么做到的？

可重现代码：

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

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

ui <- fluidPage(
  
  tags$head(
    tags$style(HTML('
      #dragTo {list-style-type: none;  counter-reset: css-counter 0;}
      #dragTo > div {counter-increment: css-counter 1;}
      #dragTo > 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 = "dragFrom",
          icons(c("Puppies", "Kittens"))
        )
      ),
    ),
    div(
      div(
        class = "panel panel-default",
        div(class = "panel-heading", "Drag to here"),
        div(
          class = "panel-body",
          id = "dragTo"
        )
      )
    )
  ),
  sortable_js(
    "dragFrom",
    options = sortable_options(
      group = list(
        pull = "clone",
        name = "group1",
        put = FALSE
      )
    )
  ),
  sortable_js(
    "dragTo",
    options = sortable_options(
      group = list(
        group = "group1",
        put = TRUE,
        pull = TRUE
      ),
      onSort = sortable_js_capture_input(input_id = "selected")
    )
  ),
  helpText(h5(strong("Output to table:"))),
  tableOutput("table1")
)

server <- function(input, output) {
  dragToLabels <- reactive({
    data.frame(data = paste0(seq_along(input$selected), ". ", input$selected))
  })
  
  output$table1 <- renderTable({dragToLabels()})
}

shinyApp(ui, server)

插图：

Answer 1

初稿使用 data.table:

library(shiny)
library(sortable)
library(htmlwidgets)
library(data.table)

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

ui <- fluidPage(
  
  tags$head(
    tags$style(HTML('
      #dragTo {list-style-type: none;  counter-reset: css-counter 0;}
      #dragTo > div {counter-increment: css-counter 1;}
      #dragTo > 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 = "dragFrom",
          icons(c("Puppies", "Kittens"))
        )
      ),
    ),
    div(
      div(
        class = "panel panel-default",
        div(class = "panel-heading", "Drag to here"),
        div(
          class = "panel-body",
          id = "dragTo"
        )
      )
    )
  ),
  sortable_js(
    "dragFrom",
    options = sortable_options(
      group = list(
        pull = "clone",
        name = "group1",
        put = FALSE
      )
    )
  ),
  sortable_js(
    "dragTo",
    options = sortable_options(
      group = list(
        group = "group1",
        put = TRUE,
        pull = TRUE
      ),
      onSort = sortable_js_capture_input(input_id = "selected")
    )
  ),
  helpText(h5(strong("Output to table:"))),
  tableOutput("table1")
)

server <- function(input, output) {
  dragToLabels <- reactive({
    # browser()
    # DT <- data.table(data = paste0(seq_along(input$selected), ". ", input$selected))
    req(input$selected)
    DT <- data.table(item = input$selected)
    DT[, c("rownumber", "letter") := .(.I, LETTERS[seq_len(.N)]), by = item]
    setcolorder(DT, c("rownumber", "item", "letter"))
    # DT[, data := paste0(rownumber, ". ", item, " ", letter)][, c("rownumber", "item", "letter") := NULL] # paste to a single column
  })
  
  output$table1 <- renderTable({dragToLabels()})
}

shinyApp(ui, server)

在 R Shiny 中，如何使用 sortable js 将它出现在列表中的顺序次数附加到每个列表元素？

In R Shiny how to append to each list element the sequential number of times it appears in the list using sortable js?

html

css

r

shiny

sortablejs