feature request (or example if already available!) - draggable divs with their own classes?

[MayaGans]

Hi! I tried creating a sortable rank_list with divs since I want them to have different classes:

library(shiny)
shinyUI(fluidPage(
    column(12,
           sortable::rank_list(
               text = "Drag the items in any desired order",
               labels = c(
                   htmltools::tags$div(class="lesson", "Lesson 1"),
                   htmltools::tags$div(class="part", "Part 1"),
                   htmltools::tags$div(class="section", "Section 1")
               ),
               input_id = "order",
               options = sortable::sortable_options(multiDrag = TRUE)
           )
    )
))

shinyServer(function(input, output) {
})

My mental model was that this would create three sortable divs with the text Lesson 1, Part 1, and Section 1 but this results in the creation of THREE divs per intended div. (One with the text "div", another with the class "lesson", and another with the intended text "Lesson 1". I saw a similar closed issue but it looks like that applies a class to the entire list... is this already possible? I tried using the dev version too just in case the error was on my end. Any help appreciated!

[andrie]

You have a small syntax error in your construction of labels. Use list() instead of c() and your example works as intended.

library(shiny)
sortable::rank_list(
  text = "Drag the items in any desired order",
  labels = list(
    htmltools::tags$div(class="lesson", "Lesson 1"),
    htmltools::tags$div(class="part", "Part 1"),
    htmltools::tags$div(class="section", "Section 1")
  ),
  input_id = "order",
  options = sortable::sortable_options(multiDrag = TRUE)
)

We have an example of this in the vignettes at https://rstudio.github.io/sortable/articles/built_in.html

[andrie]

I will add that this is not clear in the inline examples!

[MayaGans]

Ahhh 🤦‍♀️ thank you so much @andrie !