Drag And Drop Input Widget
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, dragulaOpts = list(), boxStyle = NULL, width = NULL, height = "100px" )
inputId | The |
---|---|
label | Display label for the control, or |
sourceLabel | Label display in the source box |
targetsLabels | Labels for each target element. |
targetsIds | Ids for retrieving values server-side, if |
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, 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 |
status | If choices are displayed into a Bootstrap label, you can use Bootstrap
status to color them, or |
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 |
badge | Displays choices inside a Bootstrap badge. Use |
ncolSource | Number of columns occupied by the source, default is |
ncolGrid | Number of columns used to place source and targets boxes, see examples. |
dragulaOpts | Options passed to dragula JavaScript library. |
boxStyle | CSS style string to customize source and target container. |
width | Width of the input. |
height | Height of each boxes, the total input height is this parameter X 2. |
a UI definition
The output server-side is a list with two slots: source
and targets
.
updateDragulaInput
to update choices server-side.
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)