Shiny 应用中实现可滚动 Sortable 列表的实践指南

library(shiny)
library(sortable)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      /* 为所有桶列表容器设置最小高度 */
      .bucket-list-container {min-height: 350px;}

      /* 为第一个可拖拽源列表（ID为 rank_list_1）设置最大高度和垂直滚动 */
      #rank_list_1 {
        max-height: 300px; /* 设置最大高度，可根据需要调整 */
        overflow-y: auto;  /* 当内容溢出时显示垂直滚动条 */
        border: 1px solid #ddd; /* 可选：添加边框以便观察滚动效果 */
        padding: 5px; /* 可选：增加内边距 */
      }
      /* 确保内部的列表项不会因为滚动而挤压 */
      #rank_list_1 .sortable-item {
        margin-bottom: 5px; /* 增加列表项之间的间距 */
      }
    "))
  ),
  fluidRow(
    column(
      width = 12,
      # 选择变量列表的单选按钮
      radioButtons(inputId="variableList",
                   label="选择您的变量列表",
                   choices = c("names(mtcars)"="names(mtcars)","state.name"="state.name")),
      # 用于筛选变量名称的文本输入框
      textInput(
        inputId = "subsetChooseListText",
        label = "输入文本以筛选列表",
        value = "c"
      ),
      div(
        class = "bucket-list-container default-sortable",
        "将项目拖拽到任意桶中",
        div(
          class = "default-sortable bucket-list bucket-list-horizontal",
          # uiOutput 将渲染 rank_list_1，它是可滚动的源列表
          uiOutput("selection_list", style="flex:1 0 200px;"),

          # 目标列表 1
          rank_list(
            text = "拖拽到这里",
            labels = list(),
            input_id = "rank_list_2",
            options = sortable_options(group = "mygroup")
          ),
          # 目标列表 2
          rank_list(
            text = "也可以拖拽到这里",
            labels = list(),
            input_id = "rank_list_3",
            options = sortable_options(group = "mygroup")
          )
        )
      )
    )
  ),
  fluidRow(
    column(
      width = 12,
      tags$b("结果"),
      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) {

  # 初始化响应式变量列表
  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()

    # 移除已被选择的项目
    labels <- labels[!(
      labels %in% input$rank_list_2 |
        labels %in% input$rank_list_3
    )]
    rank_list(
      text = "从这里拖拽",
      labels = labels,
      input_id = "rank_list_1", # 关键：此ID对应CSS样式
      options = sortable_options(group = "mygroup")
    )
  })

  # 用于调试的可视化输出
  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)