dragulaInput: Drag And Drop Input Widget

In esquisse: Explore and Visualize Your Data Interactively

Drag And Drop Input Widget

Description

Drag And Drop Input Widget

Usage

dragulaInput(
  inputId,
  label = NULL,
  sourceLabel,
  targetsLabels,
  targetsIds = NULL,
  choices = NULL,
  choiceNames = NULL,
  choiceValues = NULL,
  selected = NULL,
  status = "primary",
  replace = FALSE,
  copySource = TRUE,
  badge = TRUE,
  ncolSource = "auto",
  ncolGrid = NULL,
  nrowGrid = NULL,
  dragulaOpts = list(),
  boxStyle = NULL,
  targetsHeight = NULL,
  width = NULL,
  height = "100px"
)

Arguments

inputId	The input slot that will be used to access the value.
label	Display label for the control, or NULL for no label.
sourceLabel	Label display in the source box
targetsLabels	Labels for each target element.
targetsIds	Ids for retrieving values server-side, if NULL, the default, targetsLabels are used after removing all not-alphanumeric characters.
choices	List of values to select from (if elements of the list are named then that name rather than the value is displayed to the user). If this argument is provided, then choiceNames and choiceValues must not be provided, and vice-versa. The values should be strings; other types (such as logicals and numbers) will be coerced to strings.
choiceNames, choiceValues	List of names and values, respectively, that are displayed to the user in the app and correspond to the each choice (for this reason, choiceNames and choiceValues must have the same length). If either of these arguments is provided, then the other must be provided and choices must not be provided. The advantage of using both of these over a named list for choices is that choiceNames allows any type of UI object to be passed through (tag objects, icons, HTML code, ...), instead of just simple text.
selected	Default selected values. Must be a list with targetsIds as names.
status	If choices are displayed into a Bootstrap label, you can use Bootstrap status to color them, or NULL.
replace	When a choice is dragged in a target container already containing a choice, does the later be replaced by the new one ?
copySource	When replace = TRUE, does elements in source must be copied or moved ?
badge	Displays choices inside a Bootstrap badge. Use FALSE if you want to pass custom appearance with choiceNames.
ncolSource	Number of columns occupied by the source, default is "auto", meaning full row.
ncolGrid, nrowGrid	Number of columns / rows used to place source and targets boxes, see examples.
dragulaOpts	Options passed to dragula JavaScript library (see online documentation on GitHub). Note that options moves, accepts and invalid must be valid JavaScript code as they are evaluated on the client.
boxStyle	CSS style string to customize source and target container.
targetsHeight	Height for the target boxes.
width	Width of the input.
height	Height of each boxes, the total input height is this parameter X 2 (unless if targetsHeight is set).

Value

a UI definition

Note

The output server-side is a list with two slots: source and targets.

See Also

updateDragulaInput() to update choices server-side.

Examples

library(shiny)
library(esquisse)

ui <- fluidPage(
  tags$h2("Demo dragulaInput"),
  tags$br(),
  fluidRow(
    column(
      width = 6,
      
      dragulaInput(
        inputId = "dad1",
        label = "Default:",
        sourceLabel = "Source",
        targetsLabels = c("Target 1", "Target 2"),
        choices = month.abb,
        width = "100%"
      ),
      verbatimTextOutput(outputId = "result1"),
      
      tags$br(),
      
      dragulaInput(
        inputId = "dad3",
        label = "On same row:",
        sourceLabel = "Source",
        targetsLabels = c("Target 1", "Target 2"),
        choices = month.abb,
        width = "100%",
        ncolSource = 1,
        ncolGrid = 3
      ),
      verbatimTextOutput(outputId = "result3")
    ),
    
    column(
      width = 6,
      dragulaInput(
        inputId = "dad2",
        label = "Two rows:",
        sourceLabel = "Source",
        targetsLabels = c("x", "y", "color", "fill", "size", "facet"),
        choices = names(mtcars),
        width = "100%",
        ncolGrid = 3
      ),
      verbatimTextOutput(outputId = "result2"),
      
      tags$br(),
      
      dragulaInput(
        inputId = "dad4",
        label = "Two rows not filled:",
        sourceLabel = "Source",
        targetsLabels = c("x", "y", "color", "fill", "size"),
        choices = names(mtcars),
        width = "100%",
        ncolGrid = 3
      ),
      verbatimTextOutput(outputId = "result4")
    )
  )
)


server <- function(input, output, session) {
  
  output$result1 <- renderPrint(str(input$dad1))
  
  output$result2 <- renderPrint(str(input$dad2))
  
  output$result3 <- renderPrint(str(input$dad3))
  
  output$result4 <- renderPrint(str(input$dad4))
  
}

if (interactive())
  shinyApp(ui = ui, server = server)

esquisse documentation built on Sept. 18, 2024, 5:09 p.m.