Understanding the interface to sortable.js"

## get knitr just the way we like it

  message = FALSE,
  warning = FALSE,
  error = FALSE,
  tidy = FALSE,
  cache = FALSE

```{css, echo=FALSE} pre { max-height: 20em; overflow-y: auto; }

pre[class] { max-height: 20em; }

With the `sortable` [`htmlwidget`](http://www.htmlwidgets.org) you can use powerful, dependency-free interactivity from [`SortableJS`](https://sortablejs.github.io/Sortable/) in the browser, RStudio Viewer, or Shiny apps.


The central idea

The key idea to understand about sortable, and SortableJS in particular, is that the JavaScript will manipulate an HTML object based on it's CSS id.

Using sortable in markdown is a little tricky since markdown does not provide an easy way to provide an id that we'll need. We can overcome this by using bare HTML or using htmltools::tags. Let's make a simple ul list. Note, however, that sortable works with nearly any HTML element, such as div.

An example using raw HTML

The following example uses HTML to construct an unordered list (<ul>), and then uses sortable_js() to link the JavaScript required to create interactivity.


  1. The HTML id matches the selector argument of sortable_js().
  2. You can drag and drop the list entries. Try it!
<p>You can drag and drop these items in any order (try it!):</p>
<ul id = "example01">
  <li>Or drag</li>
  <li>Each of the items</li>
  <li>To different positions</li>
```r`r ''`
sortable_js(css_id = "example01")

You can drag and drop these items in any order (try it!):

sortable_js(css_id = "example01")

Use a tag list to achieve the same, but from R

You can use the functions tags() and tagList(), both from the htmltools package, to create HTML.

This means you can construct the sortable list using:

    id = "example02",
    tags$li("drag me"),
    tags$li("sort me"),
    tags$li("any way you like")

Little Harder but Better Example

The SortableJS functionality works with any HTML object, not just lists.

In this next example, you can see how to drag and drop images (<img>). To embed the plots on the page, you can use the base64::img() function to encode the png images into a format that HTML understands.

Again, notice that the HTML id matches the selector.


# use example from ?base64::img
pngfile_1 <- tempfile(fileext = ".png")
with_png(pngfile_1, width = 300, height = 200,{
  plot(1:100, rnorm(100), pch = 21, bg = "red")
  title(main = "Moves Like Jagger")

# make another plot for demo purposes
pngfile_2 <- tempfile(fileext = ".png")
with_png(pngfile_2, width = 300, height = 200,{
  barplot(1:9, col = blues9)
  title(main = "I Like the Way You Move")
    id = "example03",
  sortable_js(css_id = "example03")

The power of groups

Looking at the SortableJS excites me about the potential to use sortable as an important UI element in both a Shiny and non-Shiny context. We could potentially demo a plot builder with something like this example. You'll notice that it doesn't really do anything, but I hope the intent and direction is clear.

  system.file("shiny-examples/drag_vars_to_plot/app.R", package = "sortable")

Dragging and dropping shiny tabs

The sortable JS library allows movable tabs inside a Shiny (and also not Shiny) app.
By adding just one line of code and an id to this RStudio Tabset example, you get tabs that the user can re-arrange. You can copy and paste to see it for yourself, or runGist("2dbe45f77b65e28acab9").

The modified code snippet is:

# Show a tabset that includes a plot, summary, and table view
# of the generated distribution
type = "tabs",
id = "sortTab",
tabPanel("Plot", plotOutput("plot")),
tabPanel("Summary", verbatimTextOutput("summary")),
tabPanel("Table", tableOutput("table"))

And the full code:

  system.file("shiny-examples/shiny_tabset/app.R", package = "sortable")

Try the sortable package in your browser

Any scripts or data that you put into this service are public.

sortable documentation built on Aug. 15, 2022, 1:05 a.m.