本教程旨在解决 Shiny 应用中 sortable 包生成的列表内容过长时，如何使其容器固定高度并实现内部滚动的问题。通过引入自定义 CSS 样式，我们将详细演示如何为 rank_list 元素设置最大高度和溢出行为，从而在不影响拖拽功能的前提下，优化长列表的用户界面和体验。
1. 引言
在 R 语言的 Shiny 框架中，sortable 包提供了一种强大而灵活的方式来创建可拖拽排序的列表（bucket list）。然而，当这些列表中的项目数量非常多时，默认布局会导致列表无限增长，占用大量屏幕空间，严重影响用户体验。本文将详细介绍如何通过简单的 CSS 样式调整，为 sortable 列表设置固定的最大高度，并在内容超出时自动出现滚动条，从而实现列表内容的可滚动性。
2. 核心问题与解决方案概述
问题描述： 一个常见的场景是，用户需要从一个包含大量选项的列表中选择并拖拽项目。如果这个源列表（或目标列表）的项目数量很多，它会垂直延伸，导致页面布局混乱，甚至需要用户不断滚动整个页面才能看到所有选项。我们希望实现的效果是：列表容器的高度固定，如果内容超出，则在容器内部出现滚动条。
解决方案概述： 解决此问题的关键在于利用 CSS 的 max-height 和 overflow-y 属性。
- max-height: 用于限制容器的最大高度。一旦内容高度超过这个值，容器将保持固定高度。
- overflow-y: auto: 当内容垂直方向超出容器时，自动显示垂直滚动条。如果内容未超出，则不显示。
我们将通过修改 Shiny 应用的 ui.R 文件，在 tags$head 中添加自定义 CSS 样式，精确地定位到需要滚动的 rank_list 元素，并应用这些样式。
3. 实现步骤
我们将基于一个典型的 Shiny sortable 应用示例进行修改。该示例包含一个源列表（rank_list_1）和两个目标列表（rank_list_2 和 rank_list_3），用户可以从源列表拖拽项目到目标列表。我们的目标是使源列表 rank_list_1 具有滚动功能。
3.1 准备 Shiny 应用基础结构
首先，我们从提供的基础代码开始。这个应用允许用户选择变量列表（mtcars 或 state.name），并通过文本输入筛选源列表。
library(shiny) library(sortable) ui <- fluidPage( tags$head( tags$style(HTML(".bucket-list-container {min-height: 350px;}")) ), fluidRow( column( width = 12, radioButtons(inputId="variableList", label="Choose your variable list", choices = c("names(mtcars)"="names(mtcars)","state.name"="state.name")), textInput( inputId = "subsetChooseListText", label = "Input text to subset list of states to choose from", value = "c" ), div( class = "bucket-list-container default-sortable", "Drag the items in any desired bucket", div( class = "default-sortable bucket-list bucket-list-horizontal", uiOutput("selection_list", style="flex:1 0 200px;"), # This will render rank_list_1 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) { varList <- reactive({ req(input$variableList) if (input$variableList == "state.name") { state.name } else { # Generate a long list for demonstration purposes 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 = "Drag from here", 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)
3.2 确定目标列表容器
在上述代码中，output$selection_list 负责渲染第一个 rank_list，其 input_id 被设置为 “rank_list_1″。当 Shiny 渲染这个 rank_list 时，它会生成一个 HTML div 元素，其 id 属性就是 “rank_list_1″。因此，我们可以通过 CSS 选择器 #rank_list_1 精确地选中这个元素并应用样式。
3.3 引入自定义 CSS 样式
在 ui.R 的 tags$head 部分，添加以下 CSS 规则来控制 rank_list_1 的高度和滚动行为：
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 #ddd; /* 可选：为列表添加边框，使其更明显 */ padding: 5px; /* 可选：内边距 */ } /* 可选：调整列表项的样式，防止文本过长导致水平溢出 */ #rank_list_1 .sortable-list-item { white-space: nowrap; /* 防止文本换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ } ")) ), # ... (其余 UI 代码保持不变) )
CSS 规则解释：
- #rank_list_1: 这是 CSS ID 选择器，它会选中 HTML 中 id=”rank_list_1″ 的元素。
- max-height: 300px;: 将该元素的最大高度设置为 300 像素。如果内容高度小于 300px，元素将根据内容自动调整高度；如果内容高度超过 300px，元素高度将固定在 300px。
- overflow-y: auto;: 当元素的内容在垂直方向上超出其 max-height 时，浏览器会自动为该元素添加一个垂直滚动条。
- border: 1px solid #ddd; 和 padding: 5px;: 这些是可选的样式，用于改善列表的视觉效果和可读性。
- #rank_list_1 .sortable-list-item: 这是一个后代选择器，用于选中 rank_list_1 内部的所有 sortable-list-item 类元素（即列表中的单个可拖拽项）。
- white-space: nowrap;, overflow: hidden;, text-overflow: ellipsis;: 这些组合样式用于处理单个列表项文本过长的情况，使其不换行，超出部分隐藏并显示省略号，以保持列表项的整洁。
3.4 完整示例代码
将上述 CSS 样式集成到 ui.R 后，完整的 app.R 代码如下：
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 #ddd; /* 可选：为列表添加边框，使其更明显 */ padding: 5px; /* 可选：内边距 */ background-color: #f9f9f9; /* 可选：背景色 */ } /* 可选：调整列表项的样式，防止文本过长导致水平溢出 */ #rank_list_1 .sortable-list-item { white-space: nowrap; /* 防止文本换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ padding: 8px 12px; /* 列表项内边距 */ margin-bottom: 2px; /* 列表项之间间距 */ background-color: #fff; /* 列表项背景色 */ border: 1px solid #eee; /* 列表项边框 */ cursor: grab; /* 鼠标悬停时显示抓取手势 */ } /* 拖拽时的样式 */ .sortable-ghost { opacity: 0.4; background-color: #fcf8e3; } ")) ), fluidRow( column( width = 12, h3("Shiny Sortable 可滚动列表示例"), radioButtons(inputId="variableList", label="选择您的变量列表", choices = c("mtcars 变量 (长列表)"="names(mtcars)","state.name (短列表)"="state.name")), textInput( inputId = "subsetChooseListText", label = "输入文本以筛选列表", value = "c" ), div( class = "bucket-list-container default-sortable", tags$b("将项目拖拽到任意目标桶中"), div( class = "default-sortable bucket-list bucket-list-horizontal", # uiOutput("selection_list") 将渲染 id="rank_list_1" 的元素 uiOutput("selection_list", style="flex:1 0 200px;"), rank_list( text = "目标桶 1", labels = list(), input_id = "rank_list_2", options = sortable_options(group = "mygroup") ), rank_list( text = "目标桶 2", labels = list(), input_id = "rank_list_3", options = sortable_options(group = "mygroup") ) ) ) ) ), fluidRow( column( width = 12, tags$hr(), tags$b("当前列表内容"), fluidRow( column( width = 4
css react html 浏览器 app ai 拖拽排序 overflow red css html auto 选择器 overflow padding border ui