library(shiny)
library(dragulaR)
# devtools::install_github("hazybluedot/dragulaR")
library(shinyjs)
library(DT)
library(tidyverse)
dragOptions <- c("ONE", "TWO", "THREE", "FOUR")
# create blocks for the different column options
columnBlocks <- function(data, name)
{
div(style = "
border-width:2px;
border-style:solid;
border-color: #989898;
background-color: #D7DADC;
font-size: 20px;
text-align: center;
"
,
drag = name,
div(class = "active-title", name))
}
# dynamically create divs to drag into
# once a div is filled, create another div
ui <- fluidPage(
inlineCSS(css),
fluidRow(style = "margin: 15px;",
# create div to keep all column options
# use lapply to create the palette of blocks
fluidRow(column(12,
div(id = "COLUMNS",
style = "min-height: 10px;",
lapply(dragOptions, columnBlocks, data = dragOptions)))
),
# I want each block to be dragged into a new area.
# There should be one area to start, then if a block is dragged in this should create a second area
# I think the best way to do this:
# keep track of the number of divs in the palette and create
# div - (div - 1) number of divs for output blocks?
column(12,
uiOutput("test_drag"))))
server <- function(input, output) {
output$test_drag <- renderUI({
# somehow keep track of the number of divs
# then use that number to populate i
i <- 2
lapply(1:i, function(i)
# give each div a unique id
div(id = paste0("colOutput_", i),
style = "min-height: 70px; background-color: #F5F6F6;",
# give each dragula output area a unique id
# so we can access that block later in the pipeline
dragulaOutput(paste0("dragulaColumns_",i))))
})
# get the column block input
output$dragulaColumns_1 <- renderDragula({
dragula(c("COLUMNS", "colOutput_1"))
})
output$dragulaColumns_2 <- renderDragula({
dragula(c("COLUMNS", "colOutput_2"))
})
}
shinyApp(ui = ui, server = server)
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.