handle for sortable rank_list in RShiny

Question

I use sortable in shiny to create a sortable list where the elements can be dragged and dropped in various positions. According to the documentation (also in the underlying javascript source) you can define handles where you can grab the items and reorder them (https://jsfiddle.net/14je5rmy/, the X in this fiddle).

I am unable to do the same thing in shiny though (even though the option exists)

library(shiny)
library(sortable)

labels <- list(
  "one",
  "two",
  "three"
)

rank_list_basic <- rank_list(
  labels = labels,
  input_id = "rank_list_basic",
  options = sortable_options(handle=".handle")
)


ui <- fluidPage(
  tags$body(
    tags$span(class="handle", "X"),
  ),
  fluidRow(
      rank_list_basic,
  )
)

server <- function(input, output) {
}

shinyApp(ui, server)

In this minimum example I created the span ("handle") that I would like to use as a handle for the items in the rank_list. Can someone point me in the right direction?

Answer 1

Here is the R way to create that jsFiddle:

library(shiny)
library(sortable)

labels <- lapply(c("one","two","three"), function(i) {
    div(tags$span(class="handle", "X"), tags$span(i))
})

rank_list_basic <- rank_list(
    labels = labels,
    input_id = "rank_list_basic",
    options = sortable_options(handle=".handle")
)


ui <- fluidPage(
    tags$style('.handle {margin: 10px; color:red; background: cyan; border: 1px solid red; cursor: pointer}'),
    fluidRow(
        rank_list_basic
    )
)

server <- function(input, output) {
}

shinyApp(ui, server)