将索引添加到 R Sortable 中的可排序对象文本

Question

我正在尝试构建一个工具，让用户对项目进行排名，并且遇到了用于 R 的精彩 sortable 包，这使得构建和捕获自定义拖放用户界面的顺序变得非常容易。

虽然在后台捕获界面中对象的顺序非常容易，但我正在努力寻找一种方法来立即在可排序的用户界面中显示该索引/行号（而不是仅将其打印在其他地方） ，因为用户正在对项目进行排名，尽管这在概念上非常简单。

我已经尝试过 options/sortable_options() 参数，但无法在那里得到任何东西。是否有任何明显的方法可以在我丢失的对象的文本中显示可排序对象的索引？

library(shiny)
library(shinydashboard)
library(sortable)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
  htmlOutput("foodrankingform")
))

server <- function(input, output, session){
  output$foodrankingform <- renderUI({
    fluidRow(
      column(tags$b("Food Ranking"), width = 12,
             bucket_list(header = "Drag to the right from the foods below to rank.", group_name = "bucket_list_group", orientation = "horizontal",
                         add_rank_list("Food Pool:", labels = c("Apple", "Orange", "Lemon", "Captain Crunch", "Banana"), input_id = "rank_list_1"),
                         add_rank_list("Food Ranking:", labels = NULL,input_id = "rank_list_2")))
    )
  })
}



shinyApp(ui=ui, server=server)

Answer 1

这是一个CSS解决方案

library(shiny)
library(shinydashboard)
library(sortable)   

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$head(tags$style(HTML("
      .column_2 {
        counter-reset: rank;                      
      }

      .column_2 .rank-list-item::before {
        counter-increment: rank;                   
        content: counter(rank) '. ';    
      }
    "))),
    htmlOutput("foodrankingform")
  )
)

server <- function(input, output, session) {
  output$foodrankingform <- renderUI({
    fluidRow(
      column(tags$b("Food Ranking"), width = 12,
             bucket_list(header = "Drag to the right from the foods below to rank.", 
                         group_name = "bucket_list_group", orientation = "horizontal",
                         add_rank_list("Food Pool:", 
                                       labels = c("Apple", "Orange", "Lemon", 
                                                  "Captain Crunch", "Banana"), 
                                       input_id = "rank_list_1"),
                         add_rank_list("Food Ranking:", labels = NULL,
                                       input_id = "rank_list_2"))
      )
    )
  })
}

shinyApp(ui=ui, server=server)