Drag example

[iyermobile]

library(shiny)
library(dragulaR)
library(shinyBS)

makeElement <- function(data, name)
{
div(style = "

display: flex;
flex-direction: column;
justify-content: space-between;

max-width: 100%;
padding: 35px;
margin: 10px;
border: 2px solid rgba(255, 255, 255, .5);
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.5);

backdrop-filter: blur(15px);",
drag = name,
div(class = "active-title-row", id = name, onmousedown = paste0("hideTooltip('", name, "')"), name),
bsTooltip(id = name, title = "Hover",
placement = "top", trigger = "hover"))
}

ui <- fluidPage(
setBackgroundImage(src = "https://source.unsplash.com/E8Ufcyxz514/2400x1823", shinydashboard = FALSE),
tags$script(HTML(
"function hideTooltip(id) {
var $id = $('#' + id)
$id.tooltip('hide');
}"
)),

titlePanel("Drag and drop elements with dragulaR"),

fluidRow(style = "margin: 15px;",
column(3,
h3("Drag from here:"),
div(id = "Available", style = "min-height: 600px;",
lapply(colnames(mtcars), makeElement, data = mtcars)
)
),
column(3,
h3("Drop here:"),
div(id = "Model", style = "min-height: 600px;")
)
),
dragulaOutput("dragula")

)

server <- function(input, output) {

output$dragula <- renderDragula({
dragula(c("Available", "Model"))
})

}

shinyApp(ui = ui, server = server)