sortable

The sortable package enables drag-and-drop behaviour in your Shiny apps. It does this by exposing the functionality of the SortableJS JavaScript library as an htmlwidget in R, so you can use this in Shiny apps and widgets, learnr tutorials as well as R Markdown. In addition, provides a custom learnr question type - question_rank() that allows ranking questions with drag-and-drop.

Installation

You can install the released version of sortable from CRAN with:

install.packages("sortable")

And the development version from GitHub with:

# install.packages("remotes")
remotes::install_github("rstudio/sortable")

Examples

Rank list

You can create a drag-and-drop input object in Shiny, using the rank_list() function.

#> Warning in file(con, "r"): file("") only supports open = "w+" and open = "w+b":
#> using the former
#> Warning in knitr::read_chunk(system.file("shiny-examples/rank_list/app.R", :
#> code is empty

Bucket list

With a bucket list you can have more than one rank lists in a single object. This can be useful for bucketing tasks, e.g. asking your students to classify objects into multiple categories.

#> Warning in file(con, "r"): file("") only supports open = "w+" and open = "w+b":
#> using the former
#> Warning in knitr::read_chunk(system.file("shiny-examples/bucket_list/app.R", :
#> code is empty

Add drag-and-drop to any HTML element

You can also use sortable_js() to drag and drop other widgets:

library(DiagrammeR)
library(htmltools)

html_print(tagList(
  tags$p("You can drag and drop the diagrams to switch order:"),
  tags$div(
    id = "aUniqueId",
    tags$div(
      style = "border: solid 0.2em gray; float:left; margin: 5px",
      mermaid("graph LR; S[SortableJS] -->|sortable| R ",
              height = 250, width = 300)
    ),
    tags$div(
      style = "border: solid 0.2em gray; float:left; margin: 5px",
      mermaid("graph TD; JavaScript -->|htmlwidgets| R ",
              height = 250, width = 150)
    )
  ),
  sortable_js("aUniqueId") # the CSS id
))