### Basic orderInput Example

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/orderInput.html

A simple Shiny app demonstrating the basic usage of orderInput. The order of items is displayed in a verbatimTextOutput.

```R
server <- function(input, output) {
  output$order <- renderPrint({input$foo})
}

ui <- fluidPage(
  orderInput(inputId = 'foo', label = 'A simple example', items = c('A', 'B', 'C')),
  verbatimTextOutput('order')
)

shinyApp(ui, server)
```

--------------------------------

### Install shinyjqui Development Version from GitHub

Source: https://cloud.r-project.org/web/packages/shinyjqui/readme/README.html

Installs the latest development version of the shinyjqui package directly from its GitHub repository.

```r
devtools::install_github("yang-tang/shinyjqui")
```

--------------------------------

### Sortable Tabset Panel Example

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Creates a tabset panel where tabs can be sorted by drag and drop. The order of the tabs is available on the server.

```R
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      sortableTabsetPanel(
        id = "tabs",
        tabPanel(title = "A", "AAA"),
        tabPanel(title = "B", "BBB"),
        tabPanel(title = "C", "CCC")
      ),
      verbatimTextOutput("order")
    ),
    server = function(input, output) {
      output$order <- renderPrint({input$tabs_order})
    }
  )
}



```

--------------------------------

### Install shinyjqui from CRAN

Source: https://cloud.r-project.org/web/packages/shinyjqui/readme/README.html

Installs the stable version of the shinyjqui package from the Comprehensive R Archive Network (CRAN).

```r
install.packages('shinyjqui')
```

--------------------------------

### Interactive Selectable Table Example

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

An interactive Shiny app demonstrating a selectable table. It displays the selected row/cell indices in a text output.

```R
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      verbatimTextOutput("selected"),
      selectableTableOutput("tbl")
    ),
    server = function(input, output) {
      output$selected <- renderPrint({input$tbl_selected})
      output$tbl <- renderTable(mtcars, rownames = TRUE)
    }
  )
}
```

--------------------------------

### Create an orderable list with orderInput

Source: https://cloud.r-project.org/web/packages/shinyjqui/readme/README.html

Use orderInput to display a list of items that can be reordered via drag and drop. This example uses month abbreviations.

```R
library(shiny)
library(shinyjqui)

server <- function(input, output) {
  output$order <- renderPrint({ print(input$dest) })
}

ui <- fluidPage(
  orderInput('source', 'Source', items = month.abb,
             as_source = TRUE, connect = 'dest'),
  orderInput('dest', 'Dest', items = NULL, placeholder = 'Drag items here...'),
  verbatimTextOutput('order')
)

shinyApp(ui, server)
```

--------------------------------

### Sortable Radio Buttons Example

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Demonstrates how to create sortable radio buttons in a Shiny app. The order of selected radio buttons is captured on the server.

```R
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      sortableRadioButtons("foo", "SortableRadioButtons",
                                 choices = month.abb), 
      verbatimTextOutput("order")
    ),
    server = function(input, output) {
      output$order <- renderPrint({input$foo_order})
    }
  )
}



```

--------------------------------

### Sortable Table Output Example

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Renders a sortable HTML table in a Shiny app. Row order can be manipulated by drag and drop and is recorded on the server.

```R
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      verbatimTextOutput("rows"),
      sortableTableOutput("tbl")
    ),
    server = function(input, output) {
      output$rows <- renderPrint({input$tbl_row_index})
      output$tbl <- renderTable(mtcars, rownames = TRUE)
    }
  )
}



```

--------------------------------

### Make an element resizable

Source: https://cloud.r-project.org/web/packages/shinyjqui/readme/README.html

Use jqui_resizable to allow users to change the size of an element with the mouse. This example makes a plot output resizable.

```R
library(shiny)
library(shinyjqui)
library(ggplot2)

server <- function(input, output) {
  output$gg <- renderPlot({
    ggplot(mtcars, aes(x = cyl, y = mpg)) + geom_point()
  })
}

ui <- fluidPage(
  jqui_resizable(plotOutput('gg', width = '200px', height = '200px'))
)

shinyApp(ui, server)
```

--------------------------------

### Sortable Checkbox Group Input Example

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Demonstrates how to use sortableCheckboxGroupInput in a Shiny app. The server receives the selected choices and their order.

```R
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      sortableCheckboxGroupInput("foo", "SortableCheckboxGroupInput",
                                 choices = month.abb),
      verbatimTextOutput("order")
    ),
    server = function(input, output) {
      output$order <- renderPrint({input$foo_order})
    }
  )
}



```

--------------------------------

### Make an element draggable

Source: https://cloud.r-project.org/web/packages/shinyjqui/readme/README.html

Use jqui_draggable to allow users to move elements with the mouse. This example makes a file input element draggable.

```R
library(shiny)
library(shinyjqui)

server <- function(input, output) {}

ui <- fluidPage(
  jqui_draggable(fileInput('file', 'File'))
)

shinyApp(ui, server)
```

--------------------------------

### Interactive Draggable Highchart Example

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

A complete, interactive Shiny application demonstrating a draggable Highchart output. It shows how the position of the draggable element is sent to the server as an input value.

```R
## use shiny input
if (interactive()) {
  shinyApp(
    server = function(input, output) {
      output$foo <- renderHighchart({
        hchart(mtcars, "scatter", hcaes(x = cyl, y = mpg))
      })
      output$position <- renderPrint({
        print(input$foo_position)
      })
    },
    ui = fluidPage(
      verbatimTextOutput('position'),
      jqui_draggable(highchartOutput('foo', width = '200px', height = '200px'))
    )
  )
}


```

--------------------------------

### Render Resizable Plotly Htmlwidget

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Example of rendering a plotly htmlwidget with a resizable interaction applied directly to the widget object in UI mode.

```R
jqui_resizable(ui = plot_ly(z = ~volcano, type = "surface"))
```

--------------------------------

### Add and remove CSS classes with animation

Source: https://cloud.r-project.org/web/packages/shinyjqui/readme/README.html

Use jqui_add_class and jqui_remove_class to dynamically change element styles with animated transitions. This example uses checkboxes to apply different CSS classes.

```R
library(shiny)
library(shinyjqui)

server <- function(input, output) {

  current_class <- c()

  observe({
    input$class
    class_to_remove <- setdiff(current_class, input$class)
    class_to_add <- setdiff(input$class, current_class)
    current_class <<- input$class
    if(length(class_to_remove) > 0) {
      jqui_remove_class('#foo', paste(class_to_remove, collapse = ' '), duration = 1000)}
    if(length(class_to_add) > 0) {
      jqui_add_class('#foo', paste(class_to_add, collapse = ' '), duration = 1000)}
  })

}

ui <- fluidPage(

  tags$head(
    tags$style(
      HTML('.class1 { width: 410px; height: 100px; }
            .class2 { text-indent: 40px; letter-spacing: .2em; }
            .class3 { padding: 30px; margin: 10px; }
            .class4 { font-size: 1.1em; }')
    )
  ),

  div(id = 'foo', 'Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.'),
  hr(),
  checkboxGroupInput('class', 'Class',
                     choices = list(`width: 410px; height: 100px;` = 'class1',
                                    `text-indent: 40px; letter-spacing: .2em;` = 'class2',
                                    `padding: 30px; margin: 10px;` = 'class3',
                                    `font-size: 1.1em;` = 'class4'))


)

shinyApp(ui, server)
```

--------------------------------

### Saving and Loading orderInput State

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/orderInput.html

An example demonstrating the save and load functionality for orderInput, integrated with Shiny bookmarking. Uses action buttons to trigger save and load operations on connected inputs.

```R
ui <- fluidPage(
  orderInput('A', 'A', items = 1:3, as_source = TRUE, connect = c("B", "C")),
  orderInput('B', 'B', items = 4:6, connect = "C"),
  orderInput('C', 'C', items = 7:9, connect = "B"),
  hr(),
  actionButton("save", "Save"),
  actionButton("load", "Load")
)
server <- function(input, output, session) {
  observeEvent(input$save, jqui_sortable("#B,#C", "save"))
  observeEvent(input$load, jqui_sortable("#B,#C", "load"))
}
```

--------------------------------

### Manipulating Interactions in Server Mode

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Examples of using shinyjqui functions in the server logic to manipulate existing interactions using CSS selectors. These operations are typically performed after the UI has been rendered.

```R
## used in server
## Not run: 
  jqui_draggable('#foo', options = list(grid = c(80, 80)))
  jqui_droppable('.foo', operation = "enable")

## End(Not run)


```

--------------------------------

### Target Multiple Elements by ID for Draggable Interaction

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Example of using a jQuery selector string in server mode to apply a draggable interaction to multiple HTML elements identified by their IDs.

```R
jqui_draggable(ui = "#id1,#id2,#id3")
```

--------------------------------

### Capturing Element Offset with `shiny` Option in Draggable

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

This example demonstrates how to capture the element's offset relative to the document when it is created or being dragged. The offset value is sent to the Shiny server as `input$foo_offset`.

```R
# server
jqui_draggable('#foo', options = list(
  shiny = list(
    # By default, draggable element has a shiny input value showing the
    # element's position (relative to the parent element). Here, another shiny
    # input value (input$foo_offset) is added. It returns the element's offset
    # (position relative to the document).
    offset = list(
      # return the updated offset value when the draggable is created or dragging
      `dragcreate drag` = JS('function(event, ui) {return $(event.target).offset();}')
    )
  )
))
```

--------------------------------

### Shiny App with OrderInput

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Demonstrates how to use the orderInput widget to allow users to reorder items and how to update the input dynamically using actionButton.

```R
library(shiny)

if (interactive()) {

  ui <- fluidPage(
    orderInput("foo", "foo",
               items = month.abb[1:3],
               item_class = 'info'),
    verbatimTextOutput("order"),
    actionButton("update", "update")
  )

  server <- function(input, output, session) {
    output$order <- renderPrint({input$foo})
    observeEvent(input$update, {
      updateOrderInput(session, "foo",
                       items = month.abb[1:6],
                       item_class = "success")
    })
  }

  shinyApp(ui, server)

}


```

--------------------------------

### orderInput with Placeholder

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/orderInput.html

Shows how to use the 'placeholder' argument to display a message when an orderInput is empty, indicating where items can be dragged.

```R
orderInput('A', 'A', items = 1:3, connect = 'B')
orderInput('B', 'B', items = NULL, placeholder = 'Drag item here...')
```

--------------------------------

### Styling orderInput Items with Bootstrap Classes

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/orderInput.html

Demonstrates how to apply different Bootstrap button classes to style the items within an orderInput. Each snippet shows a different class.

```R
orderInput('default', 'default', items = 1:3, item_class = 'default')
orderInput('primary', 'primary', items = 1:3, item_class = 'primary')
orderInput('success', 'success', items = 1:3, item_class = 'success')
orderInput('info', 'info', items = 1:3, item_class = 'info')
orderInput('warning', 'warning', items = 1:3, item_class = 'warning')
orderInput('danger', 'danger', items = 1:3, item_class = 'danger')
```

--------------------------------

### Make elements sortable

Source: https://cloud.r-project.org/web/packages/shinyjqui/readme/README.html

Use jqui_sortable to allow users to reorder elements within a list or grid. This example sorts a highchart and a plot output.

```R
library(shiny)
library(shinyjqui)
library(ggplot2)
library(highcharter)

server <- function(input, output) {
  output$hc <- renderHighchart({
    hchart(mtcars, "scatter", hcaes(x = cyl, y = mpg, group = factor(vs))) %>%
      hc_legend(enabled = FALSE)
  })
  output$gg <- renderPlot({
    ggplot(mtcars, aes(x = cyl, y = mpg, color = factor(vs))) + 
      geom_point() +
      theme(legend.position= "none")
  })
}

ui <- fluidPage(
  jqui_sortable(div(id = 'plots',
                     highchartOutput('hc', width = '200px', height = '200px'),
                     plotOutput('gg', width = '200px', height = '200px')))
)

shinyApp(ui, server)
```

--------------------------------

### Enable Shiny Bookmarking for Interaction States

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/save-and-restore.html

Configures a Shiny application to use bookmarking for saving and restoring interaction states across sessions. Includes a bookmark button and enables interaction state persistence.

```r
ui <- function(request) {
  fluidPage(
    bookmarkButton(),
    jqui_resizable(plotOutput('gg', width = '200px', height = '200px'))
  )
}

server <- function(input, output) {
  output$gg <- renderPlot({
    ggplot(mtcars, aes(x = cyl, y = mpg)) + geom_point()
  })
  # enable interaction state bookmarking
  jqui_bookmarking()
}

enableBookmarking(store = "url")

shinyApp(ui, server)
```

--------------------------------

### Basic Order Input

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Creates a basic order input control with a list of items.

```R
orderInput('items1', 'Items1', items = month.abb, item_class = 'info')
```

--------------------------------

### Get Available jQuery UI Animation Effects

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Retrieves a list of all available animation effects supported by jQuery UI. This function is useful for discovering which animations can be applied to elements.

```R
get_jqui_effects()
```

--------------------------------

### Create a Draggable Modal Dialog UI

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Creates a modal dialog UI with draggable content, similar to shiny::modalDialog. Useful for interactive pop-up windows where content can be repositioned by the user.

```R
draggableModalDialog(
  ...,
  title = NULL,
  footer = shiny::modalButton("Dismiss"),
  size = c("m", "s", "l"),
  easyClose = FALSE,
  fade = TRUE
)
```

--------------------------------

### Connecting orderInputs for Drag and Drop

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/orderInput.html

Demonstrates how to connect two orderInputs, allowing items to be dragged between them. Items from 'A' can be dragged to 'B', and vice versa.

```R
# items in A can be dragged to B
orderInput('A', 'A', items = 1:3, connect = 'B')
# items in B can be dragged to A
orderInput('B', 'B', items = 4:6, connect = 'A')
```

--------------------------------

### Apply Resizable Interaction to Shiny Output

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Demonstrates applying a resizable interaction to a Shiny plotOutput element using jqui_resizable in UI mode.

```R
jqui_resizable(ui = plotOutput("myplot"))
```

--------------------------------

### Apply Scale Animation Effect with Options

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Use `jqui_effect` with the 'scale' effect and specify options like 'percent' to control the animation's scale. This is useful for dynamic resizing effects.

```R
# ui
plotOutput('foo', width = '400px', height = '400px')

# server
jqui_effect('#foo', effect = 'scale', options = list(percent = 50)) # scale to 50%
```

--------------------------------

### Apply Sortable Interaction to HTML List

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Shows how to make an HTML unordered list (tags$ul) sortable using the jqui_sortable function in UI mode.

```R
jqui_sortable(
  ui = tags$ul(
    tags$li("Coffice"), 
    tags$li("Tea"), 
    tags$li("Milk")
  )
)
```

--------------------------------

### Attaching Resizable Interaction in UI

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Demonstrates how to attach a resizable interaction to an action button when defining the UI of a Shiny application.

```R
library(shiny)
library(highcharter)

## used in ui
jqui_resizable(actionButton('btn', 'Button'))

```

--------------------------------

### jqui_bookmarking

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Enables the saving and restoring of mouse interaction states (position, size, selection, sorting) for Shiny applications through URL bookmarking.

```APIDOC
## Enable bookmarking state of mouse interactions

### Description
Enable shiny bookmarking_state of mouse interactions. By calling this function in `server`, the elements' `position`, `size`, `⁠selection state⁠` and `⁠sorting state⁠` changed by mouse operations can be saved and restored through an URL. 

### Usage
```
jqui_bookmarking()

```
```

--------------------------------

### Enable Bookmarking for Mouse Interactions

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Enables Shiny bookmarking for mouse interactions, allowing the saving and restoring of element positions, sizes, selection states, and sorting states via URL.

```R
jqui_bookmarking()
```

--------------------------------

### orderInput in Source Mode (Copy Items)

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/orderInput.html

Configures one orderInput to act as a source, enabling items to be copied (not cut) when dragged to another connected orderInput.

```R
# In source mode, items dragged to B are copied
orderInput('A', 'A', items = 1:3, connect = 'B', as_source = TRUE)
orderInput('B', 'B', items = 4:6)
```

--------------------------------

### Deleting Items by Dragging to Source orderInput

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/orderInput.html

Illustrates how items can be deleted from a non-source orderInput by dragging them to a connected orderInput set as a source.

```R
# Anything dropped into a "source" orderInput will be deleted
orderInput('A', 'A', items = 1:3, as_source = TRUE),
orderInput('B', 'B', items = 4:6)
```

--------------------------------

### Source-Only Order Input

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Creates an order input that acts as a source, allowing items to be copied to other connected inputs. Items can be copied to 'items2' and 'items4'.

```R
orderInput('items3', 'Items3 (can be copied to Items2 and Items4)', items = month.abb,
           as_source = TRUE, connect = c('items2', 'items4'), item_class = 'success')
```

--------------------------------

### Order Input with Placeholder

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

An order input that displays a placeholder message when empty and can receive items from 'items2'.

```R
orderInput('items4', 'Items4 (can be moved to Items2)', items = NULL, connect = 'items2',
           placeholder = 'Drag items here...')
```

--------------------------------

### Make Element Resizable with Aspect Ratio

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Use `jqui_resizable` with `aspectRatio = TRUE` to maintain the element's aspect ratio while resizing.

```R
# keep aspect ratio when resizing
jqui_resizable('#foo', options = list(aspectRatio = TRUE))
```

--------------------------------

### Load User-Defined State for Resizable Element

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/save-and-restore.html

Illustrates loading a specific, user-defined state (size) for a resizable plot output in Shiny. This allows setting precise dimensions programmatically.

```r
ui <- fluidPage(
  actionButton("s", "Small"),
  actionButton("m", "Medium"),
  actionButton("l", "Large"),
  jqui_resizable(plotOutput('gg', width = '200px', height = '200px'))
)

server <- function(input, output) {
  output$gg <- renderPlot({
    ggplot(mtcars, aes(x = cyl, y = mpg)) + geom_point()
  })
  observeEvent(input$s, 
               jqui_resizable(
                 ui        = "#gg", 
                 operation = "load", 
                 options   = list(state = list(width  = 100, height = 100))
               )
  )
  observeEvent(input$m, 
               jqui_resizable(
                 ui        = "#gg", 
                 operation = "load", 
                 options   = list(state = list(width  = 200, height = 200))
               )
  )
  observeEvent(input$l, 
               jqui_resizable(
                 ui        = "#gg", 
                 operation = "load", 
                 options   = list(state = list(width  = 400, height = 400))
               )
  )
}

shinyApp(ui, server)
```

--------------------------------

### Configure Droppable Element

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Configure a droppable element using `jqui_droppable` to accept specific draggable elements and change styles on active or hover states. JavaScript callbacks can be provided for custom drop behavior.

```R
jqui_droppable('#foo', options = list(
  accept = '#bar', # jQuery selector to define which draggable element to monitor. Accept anything if not set.
  classes = list(
    `ui-droppable-active` = 'ui-state-focus', # change class when draggable element is dragging
    `ui-droppable-hover` = 'ui-state-highlight' # change class when draggable element is dragging over
  ),
  drop = JS(
    'function(event, ui){$(this).addClass("ui-state-active");}'
  ) # a javascrip callback to change class when draggable element is dropped in
))
```

--------------------------------

### Resize and Hide Element with Animation

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Use `jqui_hide` with the 'size' effect to animate an element's dimensions before hiding it. This allows for controlled disappearance.

```R
# ui
plotOutput('foo', width = '400px', height = '400px')

# server
jqui_hide('#foo', effect = 'size', options = list(width = 200, height = 60)) # resize then hide
```

--------------------------------

### jqui_resizable

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Allows the size of an element to be changed using the mouse. This interaction can be enabled, disabled, destroyed, or have its state saved or loaded.

```APIDOC
## jqui_resizable

### Description
Allows the size of an element to be changed using the mouse. This interaction can be enabled, disabled, destroyed, or have its state saved or loaded.

### Usage
```r
jqui_resizable(
  ui,
  operation = c("enable", "disable", "destroy", "save", "load"),
  options = NULL
)
```

### Arguments
* `ui`: The target UI element(s) to be manipulated. Can be a `shiny.tag`, `shiny.tag.list`, `htmlwidget`, a jQuery selector string, or a JS-wrapped JavaScript expression.
* `operation`: A string to determine how to manipulate the mouse interaction. Can be one of `enable`, `disable`, `destroy`, `save`, and `load`. Ignored when `ui` is a `shiny.tag` or `shiny.tag.list` object.
* `options`: A list of interaction-specific options. Ignored when `operation` is set to `destroy`. This parameter also accepts a `shiny` option that controls the Shiny input value returned from the element.

### Details
When `ui` is a `shiny.tag`, `shiny.tag.list`, or `htmlwidget`, the function returns a modified UI object with interaction effects attached. When `ui` is a jQuery selector or JavaScript expression, the function locates the target element(s) and attaches or manipulates the interactions. The `operation` parameter is valid only in server mode.

### Value
The same object passed in the `ui` parameter.
```

--------------------------------

### draggableModalDialog

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Creates a modal dialog UI with draggable content, similar to shiny::modalDialog but with added drag-and-drop functionality for its content.

```APIDOC
## draggableModalDialog

### Description
This creates the UI for a modal dialog similar to shiny::modalDialog except its content is draggable.

### Usage
```
draggableModalDialog(
  ...,
  title = NULL,
  footer = shiny::modalButton("Dismiss"),
  size = c("m", "s", "l"),
  easyClose = FALSE,
  fade = TRUE
)
```

### Arguments
`...` |  UI elements for the body of the modal dialog box.  
---
`title` |  An optional title for the dialog.  
`footer` |  UI for footer. Use `NULL` for no footer.  
`size` |  One of `"s"` for small, `"m"` (the default) for medium, or `"l"` for large.  
`easyClose` |  If `TRUE`, the modal dialog can be dismissed by clicking outside the dialog box, or be pressing the Escape key. If `FALSE` (the default), the modal dialog can't be dismissed in those ways; instead it must be dismissed by clicking on a `modalButton()`, or from a call to `removeModal()` on the server.  
`fade` |  If `FALSE`, the modal dialog will have no fade-in animation (it will simply appear rather than fade in to view).  

### Value
A modified shiny modal dialog UI with its content draggable.
```

--------------------------------

### Attaching Sortable Interaction in UI

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Demonstrates how to attach a sortable interaction to an unordered list (ul) element, allowing list items to be reordered.

```R
jqui_sortable(tags$ul(
  id = 'lst',
  tags$li('A'),
  tags$li('B'),
  tags$li('C')
))


```

--------------------------------

### selectableTableOutput

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Renders a standard HTML table with selectable rows or cells. The server receives the index of selected rows or cells.

```APIDOC
## selectableTableOutput

### Description
Render a standard HTML table with its rows or cells selectable. The server will receive the index of selected rows or cells stored in `input$<outputId>_selected`.

### Usage
```R
selectableTableOutput(outputId, selection_mode = c("row", "cell"))
```

### Arguments
`outputId` | output variable to read the table from
`selection_mode` | one of `"row"` or `"cell"` to define either entire row or individual cell can be selected.

### Details
Use mouse click to select single target, lasso (mouse dragging) to select multiple targets, and Ctrl + click to add or remove selection. In `row` selection mode, `input$<outputId>_selected` will receive the selected row index in the form of numeric vector. In `cell` selection mode, `input$<outputId>_selected` will receive a dataframe with `rows` and `columns` index of each selected cells.

### Value
A table output element that can be included in a panel.
```

--------------------------------

### Render a sortable HTML table

Source: https://cloud.r-project.org/web/packages/shinyjqui/readme/README.html

Use sortableTableOutput to create an HTML table where rows can be sorted. The row index of the sorted row is captured.

```R
library(shiny)
library(shinyjqui)

ui <- fluidPage(
  verbatimTextOutput("index"),
  sortableTableOutput("tbl")
)

server <- function(input, output) {
  output$index <- renderPrint({
    cat("Row index:\n")
    input$tbl_row_index
  })
  output$tbl <- renderTable(head(mtcars), rownames = TRUE)
}

shinyApp(ui, server)
```

--------------------------------

### Selectable Table Output

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Renders an HTML table with selectable rows or cells. The server receives selected indices via input$<outputId>_selected.

```R
selectableTableOutput(outputId, selection_mode = c("row", "cell"))
```

--------------------------------

### Order Input Control for Shiny

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Creates an interactive ordered list input where items can be reordered via drag and drop. The order is sent back to the server. Use when you need users to arrange a list of items.

```R
orderInput(
  inputId,
  label,
  items,
  as_source = FALSE,
  connect = NULL,
  item_class = c("default", "primary", "success", "info", "warning", "danger"),
  placeholder = NULL,
  width = "500px",
  legacy = FALSE,
  ...
)

```

--------------------------------

### Target Plot Outputs for Resizable Interaction

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Demonstrates targeting all Shiny plot outputs using a CSS class selector in server mode to apply a resizable interaction.

```R
jqui_resizable(ui = ".shiny-plot-output")
```

--------------------------------

### orderInput

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Creates an order input control that allows for drag-and-drop reordering of items. It supports stand-alone mode for internal reordering and connected mode for reordering items between multiple orderInput controls.

```APIDOC
## orderInput

### Description
Creates an order input control that allows for drag-and-drop reordering of items. It supports stand-alone mode for internal reordering and connected mode for reordering items between multiple orderInput controls.

### Usage
```R
orderInput(inputId, label, items = NULL, item_class = "", connect = "", as_source = FALSE, placeholder = "Drag items here...", options = list())
```

### Arguments
`inputId` | The ID of the input control.
`label` | The label for the input control.
`items` | A list of items to display in the input control. Defaults to NULL.
`item_class` | CSS class for the items. Defaults to "".
`connect` | A character vector of inputIds to connect this orderInput to. Defaults to "".
`as_source` | If TRUE, this orderInput acts as a source-only input, meaning items can only be copied to it. Defaults to FALSE.
`placeholder` | Text to display when the input is empty. Defaults to "Drag items here...".
`options` | A list of options to customize the behavior of the orderInput. Defaults to an empty list.

### Value
An orderInput control that can be added to a UI definition.
```

--------------------------------

### Render an HTML table with selectable rows or cells

Source: https://cloud.r-project.org/web/packages/shinyjqui/readme/README.html

Use selectableTableOutput to create an HTML table with row or cell selection capabilities. The selected items are captured.

```R
library(shiny)
library(shinyjqui)

ui <- fluidPage(
  selectableTableOutput("tbl", selection_mode = "cell"),
  verbatimTextOutput("selected")
)

server <- function(input, output) {
  output$selected <- renderPrint({
    cat("Selected:\n")
    input$tbl_selected
  })
  output$tbl <- renderTable(head(mtcars), rownames = TRUE)
}

shinyApp(ui, server)
```

--------------------------------

### Synchronous Resizing of Plot Outputs

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Enable synchronous resizing of multiple plot outputs by using `jqui_resizable` with the `alsoResize` option, linking them to each other.

```R
# make the two plotOutputs resize synchronously
jqui_resizable(plotOutput('plot1', width = '400px', height = '400px'), 
                  options = list(alsoResize = '#plot2')),
plotOutput('plot2', width = '400px', height = '400px')
```

--------------------------------

### Highlight Selected Elements in a Div

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Use `jqui_selectable` to make elements within a container selectable, applying a highlight class to selected items.

```R
# highlight the selected plotOutput
jqui_selectable(
  div(
    plotOutput('plot1', width = '400px', height = '400px'),
    plotOutput('plot2', width = '400px', height = '400px')
  ),
  options = list(classes = list(`ui-selected` = 'ui-state-highlight'))
)
```

--------------------------------

### Connected Order Inputs

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Establishes connections between order inputs, allowing items to be moved between them. Items can be moved to 'items1' and 'items4'.

```R
orderInput('items2', 'Items2 (can be moved to Items1 and Items4)', items = month.abb,
           connect = c('items1', 'items4'), item_class = 'primary')
```

--------------------------------

### Show Element with Clip Animation

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Use `jqui_show` with the 'clip' effect to reveal a hidden element with a clipping animation. This is useful for staged content display.

```R
# ui
plotOutput('foo', width = '400px', height = '400px')

# server
jqui_show('#foo', effect = 'clip') # show the plot by clipping
```

--------------------------------

### jqui_selectable

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Enables the mouse to select elements, either individually or as a group. This interaction can be enabled, disabled, destroyed, or have its state saved or loaded.

```APIDOC
## jqui_selectable

### Description
Enables the mouse to select elements, either individually or as a group. This interaction can be enabled, disabled, destroyed, or have its state saved or loaded.

### Usage
```r
jqui_selectable(
  ui,
  operation = c("enable", "disable", "destroy", "save", "load"),
  options = NULL
)
```

### Arguments
* `ui`: The target UI element(s) to be manipulated. Can be a `shiny.tag`, `shiny.tag.list`, `htmlwidget`, a jQuery selector string, or a JS-wrapped JavaScript expression.
* `operation`: A string to determine how to manipulate the mouse interaction. Can be one of `enable`, `disable`, `destroy`, `save`, and `load`. Ignored when `ui` is a `shiny.tag` or `shiny.tag.list` object.
* `options`: A list of interaction-specific options. Ignored when `operation` is set to `destroy`. This parameter also accepts a `shiny` option that controls the Shiny input value returned from the element.

### Details
When `ui` is a `shiny.tag`, `shiny.tag.list`, or `htmlwidget`, the function returns a modified UI object with interaction effects attached. When `ui` is a jQuery selector or JavaScript expression, the function locates the target element(s) and attaches or manipulates the interactions. The `operation` parameter is valid only in server mode.

### Value
The same object passed in the `ui` parameter.
```

--------------------------------

### jqui_droppable

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Creates targets for draggable elements, allowing them to be "dropped" onto specific areas. This interaction can be enabled, disabled, destroyed, or have its state saved or loaded.

```APIDOC
## jqui_droppable

### Description
Creates targets for draggable elements, allowing them to be "dropped" onto specific areas. This interaction can be enabled, disabled, destroyed, or have its state saved or loaded.

### Usage
```r
jqui_droppable(
  ui,
  operation = c("enable", "disable", "destroy", "save", "load"),
  options = NULL
)
```

### Arguments
* `ui`: The target UI element(s) to be manipulated. Can be a `shiny.tag`, `shiny.tag.list`, `htmlwidget`, a jQuery selector string, or a JS-wrapped JavaScript expression.
* `operation`: A string to determine how to manipulate the mouse interaction. Can be one of `enable`, `disable`, `destroy`, `save`, and `load`. Ignored when `ui` is a `shiny.tag` or `shiny.tag.list` object.
* `options`: A list of interaction-specific options. Ignored when `operation` is set to `destroy`. This parameter also accepts a `shiny` option that controls the Shiny input value returned from the element.

### Details
When `ui` is a `shiny.tag`, `shiny.tag.list`, or `htmlwidget`, the function returns a modified UI object with interaction effects attached. When `ui` is a jQuery selector or JavaScript expression, the function locates the target element(s) and attaches or manipulates the interactions. The `operation` parameter is valid only in server mode.

### Value
The same object passed in the `ui` parameter.
```

--------------------------------

### Basic ShinyJqui Function Signatures

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

These are the base function signatures for applying various mouse interactions to Shiny UI elements. They are typically used in the UI definition of a Shiny app.

```R
jqui_draggable(
  ui,
  operation = c("enable", "disable", "destroy", "save", "load"),
  options = NULL
)

jqui_droppable(
  ui,
  operation = c("enable", "disable", "destroy", "save", "load"),
  options = NULL
)

jqui_resizable(
  ui,
  operation = c("enable", "disable", "destroy", "save", "load"),
  options = NULL
)

jqui_selectable(
  ui,
  operation = c("enable", "disable", "destroy", "save", "load"),
  options = NULL
)

jqui_sortable(
  ui,
  operation = c("enable", "disable", "destroy", "save", "load"),
  options = NULL
)


```

--------------------------------

### Make Element Draggable with Grid Snapping

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Use the `jqui_draggable` function with the `grid` option to make an element's movement snap to a specified grid.

```R
# make movement snapping to a 80 x 80 grid
jqui_draggable('#foo', options = list(grid = c(80, 80)))
```

--------------------------------

### Apply animation effects to elements

Source: https://cloud.r-project.org/web/packages/shinyjqui/readme/README.html

Use jqui_show and jqui_hide with animation effects to control element visibility. The effect can be selected from a dropdown.

```R
library(shiny)
library(shinyjqui)
library(ggplot2)

server <- function(input, output) {
  observeEvent(input$show, {
    jqui_show('#gg', effect = input$effect)
  })
  
  observeEvent(input$hide, {
    jqui_hide('#gg', effect = input$effect)
  })
  
  output$gg <- renderPlot({
    ggplot(mtcars, aes(x = cyl, y = mpg, color = factor(gear))) +
      geom_point() +
      theme(plot.background = element_rect(fill = "transparent",colour = NA))
  }, bg = "transparent")
}

ui <- fluidPage(
  div(style = 'width: 400px; height: 400px',
      plotOutput('gg', width = '100%', height = '100%')),
  selectInput('effect', NULL, choices = get_jqui_effects()),
  actionButton('show', 'Show'),
  actionButton('hide', 'Hide')
)

shinyApp(ui, server)
```

--------------------------------

### Enable Draggable Interaction on Existing UI Element

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Shows how to make an existing UI element, identified by its ID, draggable using the jqui_draggable function within the Shiny server function. The 'operation = "enable"' parameter is used to activate the interaction.

```R
ui <- fluidPage(
  textInput("foo", "Input")
)

server <- function(input, output) {
  jqui_draggable(ui = "#foo", operation = "enable")
}
```

--------------------------------

### get_jqui_effects

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Retrieves a list of all available animation effects provided by jQuery UI.

```APIDOC
## Get available animation effects.

### Description
Use this function to get all animation effects in jQuery UI. 

### Usage
```
get_jqui_effects()

```

### Value
A character vector of effect names
```

--------------------------------

### Attaching Draggable Interaction with Options in UI

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Shows how to attach a draggable interaction to a plot output, specifying 'x' as the axis option. This is done during the UI definition.

```R
jqui_draggable(plotOutput('plot', width = '400px', height = '400px'),
                options = list(axis = 'x'))

```

--------------------------------

### Create Draggable TextInput in Shiny UI

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Demonstrates how to create a draggable text input element directly within the Shiny UI definition using the jqui_draggable function.

```R
ui <- fluidPage(
  jqui_draggable(textInput("foo", "Input"))
)
```

--------------------------------

### Show UI Element with Animation

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Use jqui_show to display a UI element with a specified animation effect. This function is part of the shinyjqui package for enhancing Shiny UIs.

```R
# in shiny server show the plot with a 'blind' effect
jqui_show('#foo', 'blind')
```

--------------------------------

### Apply Draggable Interaction to Shiny Input

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Illustrates using jqui_draggable in UI mode to apply a draggable interaction to a standard Shiny textInput element.

```R
jqui_draggable(ui = textInput("foo", "Caption", "Data Summary"))
```

--------------------------------

### jqui_sortable

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Allows elements in a list or grid to be reordered using the mouse. This interaction can be enabled, disabled, destroyed, or have its state saved or loaded.

```APIDOC
## jqui_sortable

### Description
Allows elements in a list or grid to be reordered using the mouse. This interaction can be enabled, disabled, destroyed, or have its state saved or loaded.

### Usage
```r
jqui_sortable(
  ui,
  operation = c("enable", "disable", "destroy", "save", "load"),
  options = NULL
)
```

### Arguments
* `ui`: The target UI element(s) to be manipulated. Can be a `shiny.tag`, `shiny.tag.list`, `htmlwidget`, a jQuery selector string, or a JS-wrapped JavaScript expression.
* `operation`: A string to determine how to manipulate the mouse interaction. Can be one of `enable`, `disable`, `destroy`, `save`, and `load`. Ignored when `ui` is a `shiny.tag` or `shiny.tag.list` object.
* `options`: A list of interaction-specific options. Ignored when `operation` is set to `destroy`. This parameter also accepts a `shiny` option that controls the Shiny input value returned from the element.

### Details
When `ui` is a `shiny.tag`, `shiny.tag.list`, or `htmlwidget`, the function returns a modified UI object with interaction effects attached. When `ui` is a jQuery selector or JavaScript expression, the function locates the target element(s) and attaches or manipulates the interactions. The `operation` parameter is valid only in server mode.

### Value
The same object passed in the `ui` parameter.
```

--------------------------------

### sortableRadioButtons

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Creates a set of radio buttons where the choices can be reordered by the user through drag and drop. The selected value is available in the input slot, and the order of choices is available in a separate input slot suffixed with '_order'.

```APIDOC
## sortableRadioButtons

### Description
Create a set of radio buttons used to select an item from a list. The choices are sortable by drag and drop. In addition to the selected values stored in `⁠input$<inputId>⁠`, the server will also receive the order of choices in `⁠input$<inputId>_order⁠`.

### Usage
```R
sortableRadioButtons(
  inputId,
  label,
  choices = NULL,
  selected = NULL,
  inline = FALSE,
  width = NULL,
  choiceNames = NULL,
  choiceValues = NULL
)
```

### Arguments
#### `inputId`
(string) The `input` slot that will be used to access the value.

#### `label`
(string) Display label for the control, or `NULL` for no label.

#### `choices`
(list) 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.

#### `selected`
(string) The initially selected value. If not specified, then it defaults to the first item in `choices`. To start with no items selected, use `character(0)`.

#### `inline`
(boolean) If `TRUE`, render the choices inline (i.e. horizontally).

#### `width`
(string) The width of the input, e.g. `'400px'`, or `'100%'`; see `validateCssUnit()`.

#### `choiceNames`
(list) 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. See Examples.

#### `choiceValues`
(list) 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. See Examples.

### Value
A set of radio buttons that can be added to a UI definition.

```

--------------------------------

### Limit Resizable Element Dimensions

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Constrain the resizing of an element using `jqui_resizable` by specifying `minHeight`, `maxHeight`, `minWidth`, and `maxWidth` options.

```R
# Limit the resizable element to a maximum or minimum height or width
jqui_resizable('#foo', options = list(minHeight = 100, maxHeight = 300,
                                      minWidth = 200, maxWidth = 400))
```

--------------------------------

### Make Specific Items Sortable

Source: https://cloud.r-project.org/web/packages/shinyjqui/vignettes/introduction.html

Use `jqui_sortable` with the `items` option to specify a CSS selector for which child elements within the target should be sortable.

```R
# only items with class "items" inside the element become sortable
jqui_sortable('#foo', options = list(items = '> .items'))
```

--------------------------------

### Create a jQuery UI Icon

Source: https://cloud.r-project.org/web/packages/shinyjqui/refman/shinyjqui.html

Generates a jQuery UI icon element. Use this to add pre-defined icons to Shiny UI elements like buttons or tabs.

```R
jqui_icon('caret-1-n')
```

```R
library(shiny)

# add an icon to an actionButton
actionButton('button', 'Button', icon = jqui_icon('refresh'))

# add an icon to a tabPanel
tabPanel('Help', icon = jqui_icon('help'))
```