{"id":13734057,"url":"https://github.com/ayayron/shinydnd","last_synced_at":"2025-04-14T06:20:18.809Z","repository":{"id":56937684,"uuid":"60884037","full_name":"ayayron/shinydnd","owner":"ayayron","description":"Creating drag and drop elements in Shiny","archived":false,"fork":false,"pushed_at":"2017-09-24T23:19:47.000Z","size":67,"stargazers_count":93,"open_issues_count":6,"forks_count":26,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-10T10:47:44.667Z","etag":null,"topics":["draggable-elements","drop-elements","r","shiny","shiny-apps","shinyapps"],"latest_commit_sha":null,"homepage":null,"language":"R","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ayayron.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-11T00:25:28.000Z","updated_at":"2024-09-13T12:49:05.000Z","dependencies_parsed_at":"2022-08-21T05:50:50.210Z","dependency_job_id":null,"html_url":"https://github.com/ayayron/shinydnd","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayayron%2Fshinydnd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayayron%2Fshinydnd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayayron%2Fshinydnd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayayron%2Fshinydnd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ayayron","download_url":"https://codeload.github.com/ayayron/shinydnd/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248830714,"owners_count":21168339,"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":["draggable-elements","drop-elements","r","shiny","shiny-apps","shinyapps"],"created_at":"2024-08-03T03:00:52.111Z","updated_at":"2025-04-14T06:20:18.785Z","avatar_url":"https://github.com/ayayron.png","language":"R","funding_links":[],"categories":["Tools","UI Components","R"],"sub_categories":["Packages","Drag and Drop"],"readme":"# shinyDND[![Build Status](https://travis-ci.org/ayayron/shinydnd.svg?branch=master)](https://travis-ci.org/ayayron/shinydnd)\n__shinyDND__ is an R package to create Shiny drag and drop elements in R.\n\nSee the example at: [https://ayayron.shinyapps.io/dragndrop/](https://ayayron.shinyapps.io/dragndrop/).\nThat example shown below is also available in the package __/examples/app.R__. (It will be added to shinyapps.io once the package is accepted in CRAN.)\n\nThe package can be installed and loaded with:\n```r\ndevtools::install_github('ayayron/shinydnd')\nlibrary(shinyDND)\n```\n\n## Functions\n\n* _dragUI_: Draggable div element.\n* _dragSetUI_: Set of draggable div elements.\n* _dropUI_: Droppable div element.\n\n### dragUI\nDraggable div elements can now be easily created in your shiny code by running:\n```r \ndragUI(\"div6\", \"bar\")\n```\nwhere __div6__ is the name of the div element and __bar__ is the text in the element. The elements can be styled using css (the class is currently ```dragelement```) and setting the class parameter.\n```r\ndragUI(\"div5\", \"foo\", style = \"background-color:red\", class = \"dragelement\")\n```\nAlso, the elements don't have to just be text. You can use HTML tag elements \n(e.g. `tags$a(\"mylink\", href=\"#mylink\")`) or `HTML()` inside the element.\n\n```r \ndragUI(\"div4\",tags$a(\"a\",href = \"foo\"))\n```\n\n### dropUI\nA drop area can be created for these draggable elements with the function:\n```r\ndropUI(\"div3\")\n```\nIf you try to drop more than one draggable element into a drop area, they are placed horizontally. If you want to place them vertically, you can add the parameters `row_n = X` and `col_n = Y`, where __X__ and __Y__ are the number of rows and columns, respectively, that will be generated in the drop area.\n```r\ndropUI(\"div4\",row_n = 4, col_n = 3) \n```\nThe drop area can be made reactive, such that when something is dragged\ninto it a reactive function will run. Using the observeEvent function\nwhere the event is the input name of the dropUI div, can trigger a server action. \nHere, if you drag each element into the dropUI it will print the name of the element.\n```r\nobserveEvent(input$div2, {\n    output$foo = renderText(paste(\"The dropUI element currently contains:\", input$div2))\n})\n```\nSimilar to the dragUI elements, the element can be styled using the style parameter or\nthe class parameter (the class is currently ```dropelement```) in css.\n\n### dragSetUI\nTo make it easier to create multiple draggable elements there is a secoond function\ncalled DragSetUI. Here you can specify each of the elements in a list and it will create\nmultiple elements with the div name prefix you feed it.\n```r\ndragSetUI(\"div1\", textval = list(\"foo\", tags$a(\"a\", href = \"bar\"), \"baz\"))\n```\n\n\n## Example\nAfter installing the package you can run this example app: ```runApp(system.file('examples', package='shinyDND'))```. For readability, this code below excludes the explanations above.\n```r\nlibrary(shiny)\nlibrary(shinyDND)\n\n# Define UI for application that draws a histogram\nui \u003c- shinyUI(\n  mainPanel(\n    h2(\"DragUI\"),\n    dragUI(\"div6\",\"bar\"),\n    dragUI(\"div5\",\"foo\", style = \"background-color:red\", class = \"dragelement\"),\n    dragUI(\"div4\",tags$a(\"a\",href = \"foo\")),\n    h2(\"Drop UI\"),\n    dropUI(\"div3\",row_n = 4, col_n = 3),\n    h2(\"Drop UI Reactive\"),\n    dropUI(\"div2\"),\n    h2(\"DragSetUI\"),\n    dragSetUI(\"div1\", textval = list(\"foo\",tags$a(\"a\",href = \"bar\"),\"baz\"))\n  )\n)\n\n# server with reactive for observing reactive drop event\nserver = shinyServer(function(input, output,session) {\n  observeEvent(input$div2,{\n    output$foo = renderText(\n      paste(\"The dropUI element currently contains:\", input$div2))\n  })\n})\n\n# Run the application \nshinyApp(ui = ui, server = server)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayayron%2Fshinydnd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayayron%2Fshinydnd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayayron%2Fshinydnd/lists"}