如何用shinyjqui包的orderInput()实现输入项垂直排序？

可以通过自定义CSS样式实现垂直排序，orderInput默认采用水平排列的inline-block布局，我们只需调整其内部元素的布局规则即可，无需修改函数本身的参数。

以下是修改后的完整代码：

library(shinyjqui)
library(shiny)

server <- function(input, output) {
  output$order <- renderPrint({input$foo})
}

ui <- fluidPage(
  # 添加自定义CSS实现垂直排列
  tags$style(
    "#foo .items-container {
      display: flex;
      flex-direction: column;
      gap: 10px; /* 可选：设置选项之间的间距 */
    }
    #foo .items-container .item {
      width: fit-content; /* 让选项宽度适配内容 */
    }"
  ),
  orderInput(inputId = 'foo', label = '垂直排序示例', items = c('A', 'B', 'C')),
  verbatimTextOutput('order')
)

shinyApp(ui, server)

代码说明： #

• 针对id为foo的orderInput容器.items-container设置flex垂直布局（flex-direction: column），强制内部选项垂直排列。
• gap属性用于控制选项之间的间距，可根据视觉需求调整数值。
• width: fit-content让每个选项的宽度适配自身内容，避免不必要的拉伸。

修改后，拖拽排序的交互功能保持正常，选项会以垂直方向展示并支持上下拖拽调整顺序。

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