如何让sortable包的rank_list实现水平/横向排列？

首先明确：sortable_options()里的direction参数是控制拖拽时的移动方向（限制只能横向/纵向拖），不是控制列表项的默认排列布局，所以直接设置这个参数不会改变垂直显示的问题。下面是两种可行的解决方式：

方法1：自定义CSS强制横向排列 #

在Shiny的UI中添加自定义CSS，修改rank_list容器和列表项的样式，让标签横向排列并支持滚动：

library(shiny)
library(sortable)

ui <- fluidPage(
  # 自定义CSS样式
  tags$style(HTML("
    .rank-list-container .rank-list-item {
      display: inline-block;
      margin-right: 10px;
      margin-bottom: 5px;
      white-space: nowrap;
    }
    .rank-list-container {
      overflow-x: auto; /* 内容过多时显示横向滚动条 */
      padding: 10px 0;
      border: 1px solid #eee; /* 可选：添加边框方便识别区域 */
    }
  ")),
  
  rank_list(
    text = "拖拽组合日期",
    labels = c("2024年", "5月", "15日", "星期一"),
    input_id = "date_rank",
    # 限制拖拽只能横向移动，配合布局逻辑
    options = sortable_options(direction = "horizontal")
  ),
  
  verbatimTextOutput("result")
)

server <- function(input, output) {
  output$result <- renderPrint({
    paste("当前组合的日期：", paste(input$date_rank, collapse = " "))
  })
}

shinyApp(ui, server)

代码说明 #

• display: inline-block让原本垂直的列表项改为横向排列
• overflow-x: auto确保标签过多时能横向滑动
• white-space: nowrap避免单个日期标签被换行拆分
• 配合direction = "horizontal"限制拖拽方向，让操作更符合日期组合的预期

方法2：直接通过rank_list的css参数设置样式 #

如果不想单独写tags$style，也可以用rank_list自带的css参数直接传入样式规则：

rank_list(
  text = "拖拽组合日期",
  labels = c("2024年", "5月", "15日", "星期一"),
  input_id = "date_rank",
  css = list(
    rank_list = "overflow-x: auto; padding: 10px 0; border: 1px solid #eee;",
    rank_list_item = "display: inline-block; margin-right: 10px; margin-bottom: 5px; white-space: nowrap;"
  ),
  options = sortable_options(direction = "horizontal")
)

额外注意 #

• 可以根据需求调整margin参数来控制标签之间的间距
• 如果需要固定容器宽度，可给.rank-list-container添加width: 800px这类规则
• 横向排列后，拖拽的吸附逻辑会自动适配横向布局，无需额外配置

内容的提问来源于stack exchange，提问作者LMc