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

Question

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

虽然在后台捕获界面中对象的顺序非常容易，但我正在努力寻找一种方法来立即并在可排序的用户界面中显示 index/row 数字（相反只是在其他地方打印它），因为用户正在对项目进行排名，尽管这在概念上非常简单。

我已经对 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)

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

Add index to sortable object text in R Sortable

javascript

r

jquery-ui-sortable

shiny