0

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:

enter image description here

1 Answer 1

1

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;
                      }
2
  • 1
    That works very nicely, thank you! I've been stuck deep into this, searching and researching with no luck for days. You have completely bailed me out of the ditch. HTML/CSS is very new to me and not so easy to learn. Jun 1, 2022 at 11:13
  • Maybe CSS wouldn't have come into my mind, hadn't I needed to do some CSS fiddling right before your question popped up. Guess that sort of anchored me :-)
    – user18309711
    Jun 1, 2022 at 12:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.