Movatterモバイル変換

sortable: Drag-and-Drop in 'shiny' Apps with 'SortableJS'

Description

Enables drag-and-drop behaviour in Shiny apps, by exposing the functionality of the 'SortableJS'https://sortablejs.github.io/Sortable/ JavaScript library as an 'htmlwidget'. 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.

A new html widget

• sortable_js() is a low-level function that adds theSortableJS to your widgets.

Important functions

The important functions in this package are:

• rank_list() creates a drag-and-drop, rank list

• bucket_list() lets you add multiplerank_list objects in columns

Custom question types forlearnr

You can also use new question types in yourlearnr tutorials:

• question_rank()

Author(s)

Maintainer: Andrie de Vriesapdevries@gmail.com

Authors:

• Barret Schloerkebarret@posit.co

• Kenton Russellkent.russell@timelyportfolio.com (Original author) [conceptor]

Other contributors:

• Posit [copyright holder, funder]

• Lebedev Konstantin ('SortableJS', https://sortablejs.github.io/Sortable/) [copyright holder]

See Also

Useful links:

• https://rstudio.github.io/sortable/

• Report bugs athttps://github.com/rstudio/sortable/issues

Add a rank list inside bucket list.

Description

Since abucket_list can contain more than onerank_list, you needan easy way to define the contents of each individual rank list. Thisfunction serves as a specification of a rank list.

Usage

add_rank_list(text, labels = NULL, input_id = NULL, css_id = input_id, ...)

Arguments

Value

A list of classadd_rank_list

See Also

bucket_list(),rank_list() andupdate_rank_list()

Create a bucket list.

Description

A bucket list can contain more than onerank_list and allows drag-and-dropof items between the different lists.

Usage

bucket_list(  header = NULL,  ...,  group_name,  css_id = group_name,  group_put_max = rep(Inf, length(labels)),  options = sortable_options(),  class = "default-sortable",  orientation = c("horizontal", "vertical"))

Arguments

Value

A list with classbucket_list

See Also

rank_list,update_rank_list

Examples

## -- example-bucket-list ---------------------------------------------## bucket listif(interactive()) {  bucket_list(    header = "This is a bucket list. You can drag items between the lists.",    add_rank_list(      text = "Drag from here",      labels = c("a", "bb", "ccc")    ),    add_rank_list(      text = "to here",      labels = NULL    )  )}## bucket list with three columnsif(interactive()) {  bucket_list(    header = c("Sort these items into Letters and Numbers"),    add_rank_list(      text = "Drag from here",      labels = sample(c(1:3, letters[1:2]))    ),    add_rank_list(      text = "Letters"    ),    add_rank_list(      text = "Numbers"    )  )}## drag items between bucket listsif(interactive()) {  ui <- shiny::fluidPage(    shiny::column(4, bucket_list(NULL,      group_name = "foo",      add_rank_list(        text = "Drag from here...",        labels = sample(c(1:3, letters[1:2]))      )    )),    shiny::column(4, "Some empty space"),    shiny::column(4, bucket_list(NULL,      group_name = "foo",      add_rank_list(        text = "...To here"      )    ))  )  server <- function(input, output, session) {}  shiny::shinyApp(ui, server)}## Example of a shiny appif (interactive()) {  app <- system.file(    "shiny/bucket_list/app.R",    package = "sortable"  )  shiny::runApp(app)}

Chain multiple JavaScript events

Description

SortableJS does not have an event based system. To be able to call multipleJavaScript events under the same event execution, they need to be executedone after another.

Usage

chain_js_events(...)

Arguments

Value

A single JavaScript function that will call all methods provided withthe event

See Also

Other JavaScript functions:sortable_js_capture_input()

Check if shiny modules are enabled forsortable.

Description

Due to an early (regrettable) design decision,sortable in versions <= 0.5.0did not support shiny modules.To usesortable with shiny modules, you have to opt in to differentbehaviour, by callingenable_modules().

Usage

is_modules_enabled()enable_modules(enable = TRUE)

Arguments

Value

Logical value indicating whether shiny modules are enabled or not.

Check if object is sortable options.

Description

Check if object is sortable options.

Usage

is_sortable_options(x)

Arguments

Value

Logical vector. TRUE if the object inherits fromsortable_options

Examples

is_sortable_options("foo") # returns FALSE

Ranking question for learnr tutorials.

Description

Add interactive ranking tasks to yourlearnr tutorials. The student candrag-and-drop the answer options into the desired order.

Usage

question_rank(  text,  ...,  correct = "Correct!",  incorrect = "Incorrect",  loading = c("**Loading:** ", text, "<br/><br/><br/>"),  submit_button = "Submit Answer",  try_again_button = "Try Again",  allow_retry = FALSE,  random_answer_order = TRUE,  options = sortable_options())

Arguments

Details

Each set of answer options must contain the same set of answer options. Whenthe question is completed, the first correct answer will be displayed.

Note that, by default, the answer order is randomized.

Value

A customlearnr question, withtype = sortable_rank.Seelearnr::question().

Examples

## Example of rank problem inside a learnr tutorialif (interactive()) {  learnr::run_tutorial("question_rank", package = "sortable")}

Create a ranking item list.

Description

Creates a ranking item list using theSortableJS framework,and generates anhtmlwidgets element. The elements of this list can bedragged and dropped in any order.

You can embed a ranking question inside alearnr tutorial, usingquestion_rank().

To embed arank_list inside a shiny app, see the Details section.

Usage

rank_list(  text = "",  labels,  input_id,  css_id = input_id,  options = sortable_options(),  orientation = c("vertical", "horizontal"),  class = "default-sortable")

Arguments

Details

You can embed arank_list inside a Shiny app, to capture the preferredranking order of your user.

The widget automatically updates a Shiny output, with the matchinginput_id.

See Also

update_rank_list,sortable_js,bucket_list andquestion_rank

Examples

## - example-rank-list ------------------------------------------------if (interactive()) {  rank_list(    text = "You can drag, drop and re-order these items:",    labels = c("one", "two", "three", "four", "five"),    input_id = "example_2"  )}## - example-rank-list-multidrag ------------------------------------------if (interactive()) {  rank_list(    text = "You can select multiple items and drag as a group:",    labels = c("one", "two", "three", "four", "five"),    input_id = "example_2",    options = sortable_options(      multiDrag = TRUE    )  )}## - example-rank-list-swap -----------------------------------------------if (interactive()) {  rank_list(    text = "You can re-order these items, and notice the swapping behaviour:",    labels = c("one", "two", "three", "four", "five"),    input_id = "example_2",    options = sortable_options(      swap = TRUE    )  )}## Example of a shiny appif (interactive()) {  app <- system.file("shiny/rank_list/app.R", package = "sortable")  shiny::runApp(app)}

Widget render function for use in Shiny.

Description

Widget render function for use in Shiny.

Usage

render_sortable(expr, env = parent.frame(), quoted = FALSE)

Arguments

Creates an htmlwidget with embedded 'SortableJS' library.

Description

Creates anhtmlwidget that providesSortableJS to use fordrag-and-drop interactivity in Shiny apps and R Markdown.

Usage

sortable_js(  css_id,  options = sortable_options(),  width = 0,  height = 0,  elementId = NULL,  preRenderHook = NULL)

Arguments

See Also

sortable_options()

Examples

## -- example-sortable-js -------------------------------------------------# Simple example of sortable_js.# Important: set the tags CSS `id` equal to the sortable_js `css_id`if (interactive()) {  if (require(htmltools)) {    html_print(      tagList(        tags$p("You can drag and reorder the items in this list:"),        tags$ul(          id = "example_1",          tags$li("Move"),          tags$li("Or drag"),          tags$li("Each of the items"),          tags$li("To different positions")        ),        sortable_js(css_id = "example_1")      )    )  }}

Construct JavaScript method to capture Shiny inputs on change.

Description

This captures the state of asortable list. It will look for adata-rank-idattribute of the first child for each element. If no? attribute exists forthat particular item's first child, the inner text will be used as anidentifier.

Usage

sortable_js_capture_input(input_id)sortable_js_capture_bucket_input(input_id, input_ids, css_ids)

Arguments

Details

This method is used with theonSort option ofsortable_js. Seesortable_options().

Value

A character vector with classJS_EVAL. Seehtmlwidgets::JS().

See Also

sortable_js andrank_list.

Other JavaScript functions:chain_js_events()

Examples

## -- example-sortable-js-capture -----------------------------------------# Simple example of sortable_js_capture.# Important: set the tags CSS `id` equal to the sortable_js `css_id`if(interactive()) {  library(shiny)  library(sortable)  ui <- fluidPage(    div(      id = "sortable",      div(id = 1, `data-rank-id` = "HELLO", class = "well", "Hello"),      div(id = 2, `data-rank-id` = "WORLD", class = "well", "world")    ),    verbatimTextOutput("chosen"),    sortable_js(      css_id = "sortable",      options = sortable_options(        onSort = sortable_js_capture_input(input_id = "selected")      )    )  )  server <- function(input, output){    output$chosen <- renderPrint(input$selected)  }  shinyApp(ui, server)}## ------------------------------------# For an example, see the Shiny app atsystem.file("shiny/drag_vars_to_plot/app.R", package = "sortable")

Define options to pass to a sortable object.

Description

Use this function to define the options forsortable_js andrank_list,which will pass these in turn to theSortableJS JavaScript library.

Usage

sortable_options(  ...,  swap = NULL,  multiDrag = NULL,  group = NULL,  sort = NULL,  delay = NULL,  disabled = NULL,  animation = NULL,  handle = NULL,  filter = NULL,  draggable = NULL,  swapThreshold = NULL,  invertSwap = NULL,  direction = NULL,  scrollSensitivity = NULL,  scrollSpeed = NULL,  onStart = NULL,  onEnd = NULL,  onAdd = NULL,  onUpdate = NULL,  onSort = NULL,  onRemove = NULL,  onFilter = NULL,  onMove = NULL,  onLoad = NULL)

Arguments

Details

Many of theSortableJS options will accept a JavaScript function. You cando this using thehtmlwidgets::JS function.

Value

A list with classsortable_options

References

https://github.com/sortablejs/Sortable/

See Also

sortable_js

Examples

sortable_options(sort = FALSE)

Widget output function for use in Shiny.

Description

Widget output function for use in Shiny.

Usage

sortable_output(input_id, width = "0px", height = "0px")

Arguments

Change the value of a bucket list.

Description

You can only update theheader of thebucket_list.To update any of the labels or rank list text, useupdate_rank_list()instead.

Usage

update_bucket_list(  css_id,  header = NULL,  session = shiny::getDefaultReactiveDomain())

Arguments

See Also

bucket_list,update_rank_list

Examples

## Example of a shiny app that updates a bucket list and rank listif (interactive()) {  app <- system.file(    "shiny/update/app.R",    package = "sortable"  )  shiny::runApp(app)}

Change the text or labels of a rank list.

Description

Change the text or labels of a rank list.

Usage

update_rank_list(  css_id,  text = NULL,  labels = NULL,  session = shiny::getDefaultReactiveDomain())

Arguments

See Also

rank_list

Examples

## Example of a shiny app that updates a bucket list and rank listif (interactive()) {  app <- system.file(    "shiny/update_rank_list/app.R",    package = "sortable"  )  shiny::runApp(app)}