Shiny Sortable列表滚动实现教程

library(shiny)
library(sortable)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      /* 整体桶列表容器的最小高度 */
      .bucket-list-container {
        min-height: 350px;
      }
      /* 为 rank_list_1 添加滚动条样式 */
      #rank_list_1 {
        max-height: 300px; /* 设置最大高度，可根据需要调整 */
        overflow-y: auto;  /* 垂直方向内容溢出时显示滚动条 */
        border: 1px solid #e0e0e0; /* 可选：为列表添加边框以便更好地区分 */
        padding: 5px;      /* 可选：内部填充 */
        background-color: #f8f8f8; /* 可选：背景色 */
        /* 确保在flex布局中，该元素的高度能被正确限制 */
        flex-basis: 200px; /* 维持原有flex布局中的宽度基准 */
        flex-grow: 1;      /* 允许其增长 */
        flex-shrink: 1;    /* 允许其收缩 */
      }
      /* 调整其他 rank_list 的样式，使其与滚动列表对齐 */
      #rank_list_2, #rank_list_3 {
        border: 1px solid #e0e0e0; /* 添加边框 */
        padding: 5px;
        background-color: #f8f8f8;
        min-height: 100px; /* 确保有最小高度 */
        flex-basis: 200px; /* 维持原有flex布局中的宽度基准 */
        flex-grow: 1;
        flex-shrink: 1;
      }
      /* 确保横向桶列表的子元素（即各个rank_list）能够填充高度 */
      .bucket-list.bucket-list-horizontal > * {
        align-self: stretch; /* 让子元素拉伸以填充父容器的高度 */
      }
    "))
  ),
  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"), # 移除 inline style，通过CSS文件控制
          rank_list(
            text = "到这里",
            labels = list(),
            input_id = "rank_list_2",
            options = sortable_options(group = "mygroup")
          ),
          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",
      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)