有什么创造性的方法可以将排序编号添加到这个简单的可排序包示例中吗？

Question

当运行下面的“可重现代码”时，我正在尝试对右侧“拖动到”面板中的列表元素进行排序。请参阅底部的图片以获取说明。

我找到了一个示例，，其中列表元素使用 HTML 和相同的可排序包进行排序编号。但是，此示例使用 sortable 的 bucket_list() 和 add_rank_list()，并且 html 片段仅与这些函数结合使用。出于“克隆”的原因，我使用 sortable_js() 而不是 bucket_list() 和 add_rank_list().

如何向这些列表元素添加排序编号？

可重现代码：

library(shiny)
library(sortable)
library(htmlwidgets)

icons <- function(x) {lapply(x,function(x){tags$div(tags$strong(x))})}

ui <- fluidPage(
  
  div(
    style = "margin-top: 2rem; width: 60%; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start;",

    div(
      div(
        class = "panel panel-default",
        div(class = "panel-heading", "Drag from here"),
        div(
          class = "panel-body",
          id = "drag_from",
          icons(c("A", "B", "C", "D", "E"))
        )
      ),
    ),
    div(
      div(
        class = "panel panel-default",
        div(class = "panel-heading", "Drag to here"),
        div(
          class = "panel-body",
          id = "drag_to"
        )
      )
    )
  ),
  sortable_js(
    "drag_from",
    options = sortable_options(
      group = list(
        pull = "clone",
        name = "group1",
        put = FALSE
      )
    )
  ),
  sortable_js(
    "drag_to",
    options = sortable_options(
      group = list(
        group = "group1",
        put = TRUE,
        pull = TRUE
      ),
      onAdd = htmlwidgets::JS() # something that works here to rank order number to each element dragged in?
    )
  ),
)

server <- function(input, output) {}

shinyApp(ui, server)

插图：

Answer 1

如果您只针对显示格式，您可以include some custom CSS to enumerate the CSS-selected elements像这样：

ui <- fluidPage(
  tags$head(
         tags$style(HTML('
             #drag_to {list-style-type: none;  counter-reset: css-counter 0;}
             #drag_to > div {counter-increment: css-counter 1;}
             #drag_to > div:before {content: counter(css-counter) ". ";}
      ')
      )
      ) ##, etc.

我还建议您选择一种指示可拖动项目的光标样式（目前您使用的是文本输入）。如果需要，将其添加到上面的 CSS 声明中：

    #drag_from > div {cursor: move; #fallback
                      cursor: grab; cursor: -moz-grab;
                      cursor: -webkit-grab;
                      }

有什么创造性的方法可以将排序编号添加到这个简单的可排序包示例中吗？

Any creative ways to add rank ordering numbering to this simple sortable package example?

html

r

ranking

shiny

sortablejs