knitr::opts_chunk$set( collapse = TRUE, comment = "#>", fig.path = "man/figures/README-", out.width = "100%" )
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.
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")
You can create a drag-and-drop input object in Shiny, using the rank_list()
function.
knitr::read_chunk( system.file("shiny/rank_list/app.R", package = "sortable") )
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.
knitr::read_chunk( system.file("shiny/bucket_list/app.R", package = "sortable") )
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 ))
I learnt about the following related work after starting on sortable
:
esquisse
package:"The purpose of this add-in is to let you explore your data quickly to extract the information they hold. You can only create simple plots, you won't be able to use custom scales and all the power of ggplot2."
shinyjqui
package:"An R wrapper for jQuery UI javascript library. It allows user to easily add interactions and animation effects to a shiny app."
shinyDND
package:Adds functionality to create drag and drop div elements in shiny.
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.