{"id":13734072,"url":"https://github.com/rstudio/sortable","last_synced_at":"2025-04-09T05:11:43.262Z","repository":{"id":28119272,"uuid":"31618226","full_name":"rstudio/sortable","owner":"rstudio","description":"R htmlwidget for Sortable.js","archived":false,"fork":false,"pushed_at":"2024-09-12T11:20:32.000Z","size":8439,"stargazers_count":135,"open_issues_count":17,"forks_count":32,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-02T04:04:38.227Z","etag":null,"topics":["htmlwidget","r","r-package"],"latest_commit_sha":null,"homepage":"https://rstudio.github.io/sortable/","language":"R","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rstudio.png","metadata":{"files":{"readme":"README.Rmd","changelog":"NEWS.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-03-03T19:57:30.000Z","updated_at":"2025-02-10T08:33:44.000Z","dependencies_parsed_at":"2024-03-31T18:33:29.361Z","dependency_job_id":"4b37e835-d0d2-46f6-b110-a1528d6fc95b","html_url":"https://github.com/rstudio/sortable","commit_stats":{"total_commits":403,"total_committers":9,"mean_commits":44.77777777777778,"dds":"0.42431761786600497","last_synced_commit":"4b9d42a5c7661111ab09b7f291ff1102ad48f132"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstudio%2Fsortable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstudio%2Fsortable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstudio%2Fsortable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstudio%2Fsortable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rstudio","download_url":"https://codeload.github.com/rstudio/sortable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980844,"owners_count":21027808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["htmlwidget","r","r-package"],"created_at":"2024-08-03T03:00:52.262Z","updated_at":"2025-04-09T05:11:43.231Z","avatar_url":"https://github.com/rstudio.png","language":"R","readme":"---\noutput: github_document\nformat: gfm\ndefault-image-extension: \"\"\n---\n\n\u003c!-- README.md is generated from README.Rmd. Please edit that file --\u003e\n\n```{r, include = FALSE}\nknitr::opts_chunk$set(\n  collapse = TRUE,\n  comment = \"#\u003e\",\n  fig.path = \"man/figures/README-\",\n  out.width = \"100%\"\n)\n```\n\n# sortable \u003cimg src='man/figures/logo.png' align=\"right\" height=\"139\" /\u003e\n\n\u003c!-- badges: start --\u003e\n[![CRAN status](https://www.r-pkg.org/badges/version/sortable)](https://CRAN.R-project.org/package=sortable)\n[![CRAN RStudio mirror downloads](https://cranlogs.r-pkg.org/badges/sortable)](https://www.r-pkg.org/pkg/sortable)\n[![R build status](https://github.com/rstudio/sortable/actions/workflows/R-CMD-check.yaml/badge.svg)](https://github.com/rstudio/sortable/actions)\n[![Codecov test coverage](https://codecov.io/gh/rstudio/sortable/branch/main/graph/badge.svg)](https://codecov.io/gh/rstudio/sortable?branch=main)\n[![Lifecycle: stable](https://img.shields.io/badge/lifecycle-stable-brightgreen.svg)](https://lifecycle.r-lib.org/articles/stages.html#stable)\n\u003c!-- badges: end --\u003e\n\nThe `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.\n\n\n\n## Installation\n\nYou can install the released version of sortable from [CRAN](https://CRAN.R-project.org) with:\n\n```r\ninstall.packages(\"sortable\")\n```\n\nAnd the development version from [GitHub](https://github.com/rstudio/sortable) with:\n\n```r\n# install.packages(\"remotes\")\nremotes::install_github(\"rstudio/sortable\")\n```\n\n## Examples\n\n### Rank list\n\nYou can create a drag-and-drop input object in Shiny, using the `rank_list()` function.\n\n\u003ccenter\u003e\n\u003cimg src=\"man/figures/rank_list_shiny.gif\" style = 'width:500px;'\u003e\u003c/img\u003e\n\u003c/center\u003e\n\n```{r echo=FALSE, cache=FALSE}\nknitr::read_chunk(\n  system.file(\"shiny/rank_list/app.R\", package = \"sortable\")\n)\n```\n\n```{r rank-list-app, eval=FALSE}\n```\n\n\n\n### Bucket list\n\nWith 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.\n\n\u003ccenter\u003e\n\u003cimg src=\"man/figures/bucket_list_shiny.gif\" style = 'width:500px;'\u003e\u003c/img\u003e\n\u003c/center\u003e\n\n\n```{r echo=FALSE, cache=FALSE}\nknitr::read_chunk(\n  system.file(\"shiny/bucket_list/app.R\", package = \"sortable\")\n)\n```\n\n```{r bucket-list-app, eval=FALSE}\n```\n\n\n\n### Add drag-and-drop to any HTML element\n\nYou can also use `sortable_js()` to drag and drop other widgets:\n\n\u003ccenter\u003e\n\u003cimg src=\"man/figures/diagrammer.gif\" style = 'width:500px;'\u003e\u003c/img\u003e\n\u003c/center\u003e\n\n```{r, eval=FALSE}\nlibrary(DiagrammeR)\nlibrary(htmltools)\n\nhtml_print(tagList(\n  tags$p(\"You can drag and drop the diagrams to switch order:\"),\n  tags$div(\n    id = \"aUniqueId\",\n    tags$div(\n      style = \"border: solid 0.2em gray; float:left; margin: 5px\",\n      mermaid(\"graph LR; S[SortableJS] --\u003e|sortable| R \",\n              height = 250, width = 300)\n    ),\n    tags$div(\n      style = \"border: solid 0.2em gray; float:left; margin: 5px\",\n      mermaid(\"graph TD; JavaScript --\u003e|htmlwidgets| R \",\n              height = 250, width = 150)\n    )\n  ),\n  sortable_js(\"aUniqueId\") # the CSS id\n))\n```\n\n\n## Related work\n\nI learnt about the following related work after starting on `sortable`:\n\n* The `esquisse` [package](https://github.com/dreamRs/esquisse):\n\n  \u003e \"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.\"\n\n* There is also the `shinyjqui` [package](https://yang-tang.github.io/shinyjqui/):\n\n  \u003e \"An R wrapper for jQuery UI javascript library. It allows user to easily add interactions and animation effects to a shiny app.\"\n\n* The `shinyDND` [package](https://cran.r-project.org/package=shinyDND):\n\n  \u003e Adds functionality to create drag and drop div elements in shiny.\n","funding_links":[],"categories":["UI Components","R"],"sub_categories":["Drag and Drop"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frstudio%2Fsortable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frstudio%2Fsortable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frstudio%2Fsortable/lists"}