inst/apps/GUI/app.R

In MayaGans/TableGenerator: Drag and Drop Elements in 'Shiny' using 'Dragula Javascript Library'

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)