使用 Shiny 和 Sortable 创建可滚动 Bucket List

library(shiny)
library(sortable)

ui <- fluidPage(
  tags$head(
    tags$style(HTML(".bucket-list-container {min-height: 350px;}"))
  ),
  fluidRow(
    column(
      width = 12,
      #choose list of variable names to send to bucket list
      radioButtons(inputId="variableList",
                   label="Choose your variable list",
                   choices = c("names(mtcars)"="names(mtcars)","state.name"="state.name")),
      #input text to subset variable names
      textInput(
        inputId = "subsetChooseListText",
        label = "Input text to subset list of states to choose from",
        value = "c"
      ),
      div(
        # class value is current default class value for container
        class = "bucket-list-container default-sortable",
        "Drag the items in any desired bucket",
        # 添加wrapper div
        div(style = "width: 100%; height: 200px; overflow-y: auto;",
            # class value is current default class value for list
            div(
              class = "default-sortable bucket-list bucket-list-horizontal",
              # need to make sure the outer div size is respected
              # use the current default flex value
              uiOutput("selection_list", style="flex:1 0 200px;"),
              rank_list(
                text = "to here",
                labels = list(),
                input_id = "rank_list_2",
                options = sortable_options(group = "mygroup")
              ),
              rank_list(
                text = "and also here",
                labels = list(),
                input_id = "rank_list_3",
                options = sortable_options(group = "mygroup")
              )
            )
        )
      )
    )
  ),
  fluidRow(
    column(
      width = 12,
      tags$b("Result"),
      column(
        width = 12,

        tags$p("input$rank_list_1"),
        verbatimTextOutput("results_1"),

        tags$p("input$rank_list_2"),
        verbatimTextOutput("results_2"),

        tags$p("input$rank_list_3"),
        verbatimTextOutput("results_3")

      )
    )
  )
)

server <- function(input,output) {

  #initialize reactive values
  varList <- reactive({
    req(input$variableList)
    if (input$variableList == "state.name") {
      state.name
    } else {
      paste0(rep(names(mtcars), 20),"_", 1:220)
    }
  })

  subsetChooseList <- reactive({
    items <- varList()
    pattern <- input$subsetChooseListText
    if (nchar(pattern) < 1) {
      return(items)
    }
    items[
      grepl(
        x = items,
        pattern = input$subsetChooseListText,
        ignore.case = TRUE
      )
    ]
  })

  output$selection_list <- renderUI({
    labels <- subsetChooseList()

    # remove already chosen items
    labels <- labels[!(
      labels %in% input$rank_list_2 |
        labels %in% input$rank_list_3
    )]
    rank_list(
      text = "Drag from here",
      labels = labels,
      input_id = "rank_list_1",
      options = sortable_options(group = "mygroup")
    )
  })

  #visual output for debugging
  output$results_1 <- renderPrint(input$rank_list_1)
  output$results_2 <- renderPrint(input$rank_list_2)
  output$results_3 <- renderPrint(input$rank_list_3)

}


shinyApp(ui, server)