shinyDND![Build Status](https://camo.githubusercontent.com/ce4987c9a7e8484c2825bea076dc7671953f2f61d80555ad4baa3e854cd9678f/68747470733a2f2f7472617669732d63692e6f72672f61796179726f6e2f7368696e79646e642e7376673f6272616e63683d6d6173746572)
shinyDND is an R package to create Shiny drag and drop elements in R.
See the example at: https://ayayron.shinyapps.io/dragndrop/. That 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.)
The package can be installed and loaded with:
devtools::install_github('ayayron/shinydnd')
library(shinyDND)
Functions
- dragUI: Draggable div element.
- dragSetUI: Set of draggable div elements.
- dropUI: Droppable div element.
dragUI
Draggable div elements can now be easily created in your shiny code by running:
dragUI("div6", "bar")
where 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.
dragUI("div5", "foo", style = "background-color:red", class = "dragelement")
Also, the elements don't have to just be text. You can use HTML tag elements
(e.g. tags$a("mylink", href="#mylink")
) or HTML()
inside the element.
dragUI("div4",tags$a("a",href = "foo"))
dropUI
A drop area can be created for these draggable elements with the function:
dropUI("div3")
If 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.
dropUI("div4",row_n = 4, col_n = 3)
The drop area can be made reactive, such that when something is dragged into it a reactive function will run. Using the observeEvent function where the event is the input name of the dropUI div, can trigger a server action. Here, if you drag each element into the dropUI it will print the name of the element.
observeEvent(input$div2, {
output$foo = renderText(paste("The dropUI element currently contains:", input$div2))
})
Similar to the dragUI elements, the element can be styled using the style parameter or
the class parameter (the class is currently dropelement
) in css.
dragSetUI
To make it easier to create multiple draggable elements there is a secoond function called DragSetUI. Here you can specify each of the elements in a list and it will create multiple elements with the div name prefix you feed it.
dragSetUI("div1", textval = list("foo", tags$a("a", href = "bar"), "baz"))
Example
After installing the package you can run this example app: runApp(system.file('examples', package='shinyDND'))
. For readability, this code below excludes the explanations above.
library(shiny)
library(shinyDND)
# Define UI for application that draws a histogram
ui <- shinyUI(
mainPanel(
h2("DragUI"),
dragUI("div6","bar"),
dragUI("div5","foo", style = "background-color:red", class = "dragelement"),
dragUI("div4",tags$a("a",href = "foo")),
h2("Drop UI"),
dropUI("div3",row_n = 4, col_n = 3),
h2("Drop UI Reactive"),
dropUI("div2"),
h2("DragSetUI"),
dragSetUI("div1", textval = list("foo",tags$a("a",href = "bar"),"baz"))
)
)
# server with reactive for observing reactive drop event
server = shinyServer(function(input, output,session) {
observeEvent(input$div2,{
output$foo = renderText(
paste("The dropUI element currently contains:", input$div2))
})
})
# Run the application
shinyApp(ui = ui, server = server)