I am trying to rank order number the list elements in the “Drag to” panel on the right when running the below "Reproducible Code". See image at the bottom for an illustration.
I found an example, Add index to sortable object text in R Sortable, where list elements are rank order numbered using HTML with the same sortable package. However, this example uses sortable's bucket_list()
and add_rank_list()
and that html snippet only works in conjunction with those functions. For “cloning” reasons I’m using sortable_js()
instead of bucket_list()
and add_rank_list()
.
How can I add rank order numbers to those list elements?
Reproducible Code:
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)
Illustration:
If you only target the display format, you could include some custom CSS to enumerate the CSS-selected elements like so:
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.
I'd also suggest you choose a cursor style which signals a draggable item (currently you're using one for text input). Add this to above CSS declarations if desired:
#drag_from > div {cursor: move; #fallback
cursor: grab; cursor: -moz-grab;
cursor: -webkit-grab;
}