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 
