-
Notifications
You must be signed in to change notification settings - Fork 30
/
README.Rmd
135 lines (92 loc) · 4.15 KB
/
README.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
---
output: github_document
format: gfm
default-image-extension: ""
---
<!-- README.md is generated from README.Rmd. Please edit that file -->
```{r, include = FALSE}
knitr::opts_chunk$set(
collapse = TRUE,
comment = "#>",
fig.path = "man/figures/README-",
out.width = "100%"
)
```
# sortable <img src='man/figures/logo.png' align="right" height="139" />
<!-- badges: start -->
[](https://CRAN.R-project.org/package=sortable)
[](https://www.r-pkg.org/pkg/sortable)
[](https://github.com/rstudio/sortable/actions)
[](https://codecov.io/gh/rstudio/sortable?branch=main)
[](https://lifecycle.r-lib.org/articles/stages.html#stable)
<!-- badges: end -->
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.
<center>
<img src="man/figures/rank_list_shiny.gif" style = 'width:500px;'></img>
</center>
```{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.
<center>
<img src="man/figures/bucket_list_shiny.gif" style = 'width:500px;'></img>
</center>
```{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:
<center>
<img src="man/figures/diagrammer.gif" style = 'width:500px;'></img>
</center>
```{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.