Basic Shiny Apps to illusrate the use of SortableJS library to drag and drop elements.
The main idea is to create a custom output object to interconnect a div element with the SortableJS library. The output binding is implemented in the JavaScript file drag_drop_binding.js. Inside the JavaScript code, a new Sortable object is created with a set of options. In the options, it is defined a function for the event onEnd that will update a Shiny output variable with a list of all the images in the source and destination container.
To use this output object you need to add to your code the SortableJS library, the binding code, and the custom styles. Just add to your ui component the following lines:
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "styles.css"),
tags$script(type = "text/javascript", src = "Sortable.js"),
tags$script(type = "text/javascript", src = "drag_drop_binding.js")
)Then add the following function to your code and make it accessible to your server component. You can just put inside the server function, but you can put it in any other location, as long it is accessible inside the server function.
# create a container of draggable elements in a grid
createGridDrag <- function(id, ..., group = "shared") {
# to call the renderValue function in drag_drop_binding.js and
# send the group name
output[[id]] <- function(){ group }
div(id = id, class = "grid_drag_drop group_border", ... )
}The grid_drag_drop class is used by the binding function to identify elements that should be associated with the output object. The group_border class is used to add a border around the div.
Finally, just call the function createGridDrag to create a container where all the components can be dragged. In this case, images.
In dragAndDrop1.R is an example where a container will start with a set of images that can be dropped to any other container.
In dragAndDrop2.R is an example where the elements of a container can only be dropped in another conteiner of the same group. This behavior is possible by using a different group name.
In dragAndDrop3.R is an example where new classes can be created by user. It can starts with a predefiend set of clasess or without classes and later new classes can be added.
If you have problems running the examples or you have suggestions, please open an issue here at GitHub. Also if you are interested in collaborate, please make a pull request.