Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rstudio/sortable
R htmlwidget for Sortable.js
https://github.com/rstudio/sortable
htmlwidget r r-package
Last synced: 3 months ago
JSON representation
R htmlwidget for Sortable.js
- Host: GitHub
- URL: https://github.com/rstudio/sortable
- Owner: rstudio
- License: other
- Created: 2015-03-03T19:57:30.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2024-06-26T13:39:19.000Z (5 months ago)
- Last Synced: 2024-07-21T07:48:04.958Z (4 months ago)
- Topics: htmlwidget, r, r-package
- Language: R
- Homepage: https://rstudio.github.io/sortable/
- Size: 7.18 MB
- Stars: 127
- Watchers: 6
- Forks: 30
- Open Issues: 19
-
Metadata Files:
- Readme: README.Rmd
- License: LICENSE
Awesome Lists containing this project
- awesome-shiny-extensions - sortable - HTML widget for SortableJS that enables drag-and-drop behavior and reorderable elements. (UI Components / Drag and Drop)
- jimsghstars - rstudio/sortable - R htmlwidget for Sortable.js (R)
README
---
output: github_document
format: gfm
default-image-extension: ""
---
```{r, include = FALSE}
knitr::opts_chunk$set(
collapse = TRUE,
comment = "#>",
fig.path = "man/figures/README-",
out.width = "100%"
)
```
# sortable 
[](https://cran.r-project.org/package=sortable)
[](https://www.r-pkg.org/pkg/sortable)
[](https://github.com/rstudio/sortable/actions)
[](http://www.rpackages.io/package/sortable)
[](https://codecov.io/gh/rstudio/sortable?branch=main)
[](https://www.tidyverse.org/lifecycle/#maturing)
[](https://community.rstudio.com/c/teaching)
[](https://community.rstudio.com/new-topic?title=&category_id=13&tags=sortable&body=%0A%0A%0A%20%20--------%0A%20%20%0A%20%20%3Csup%3EReferred%20here%20by%20%60sortable%60%27s%20GitHub%3C/sup%3E%0A&u=barret)
The `sortable` package enables drag-and-drop behaviour in your Shiny apps. It does this by exposing the functionality of the [SortableJS](https://sortablejs.github.io/Sortable/) JavaScript library as an [htmlwidget](http://www.htmlwidgets.org) 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](https://CRAN.R-project.org) with:
```r
install.packages("sortable")
```
And the development version from [GitHub](https://github.com/rstudio/sortable) with:
```r
# 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.
```{r echo=FALSE, cache=FALSE}
knitr::read_chunk(
system.file("shiny-examples/rank_list/app.R", package = "sortable")
)
```
```{r rank-list-app, eval=FALSE}
```
### 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.
```{r echo=FALSE, cache=FALSE}
knitr::read_chunk(
system.file("shiny-examples/bucket_list/app.R", package = "sortable")
)
```
```{r bucket-list-app, eval=FALSE}
```
### Add drag-and-drop to any HTML element
You can also use `sortable_js()` to drag and drop other widgets:
```{r, eval=FALSE}
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
))
```
## Related work
I learnt about the following related work after starting on `sortable`:
* The `esquisse` [package](https://github.com/dreamRs/esquisse):
> "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."
* There is also the `shinyjqui` [package](https://yang-tang.github.io/shinyjqui/):
> "An R wrapper for jQuery UI javascript library. It allows user to easily add interactions and animation effects to a shiny app."
* The `shinyDND` [package](https://cran.r-project.org/package=shinyDND):
> Adds functionality to create drag and drop div elements in shiny.