Attach mouse-based interactions to shiny html tags, shiny input/output widgets or static htmlwidgets and provide ways to manipulate them. The interactions include:
draggable: Allow elements to be moved using the mouse.
droppable: Create targets for draggable elements.
resizable: Change the size of an element using the mouse.
selectable: Use the mouse to select elements, individually or in a group.
sortable: Reorder elements in a list or grid using the mouse.
Usage
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
)
Arguments
- ui
The target ui element(s) to be manipulated. Can be
A
shiny.tag
orshiny.tag.list
objectA static
htmlwidget
objectA string of jQuery_selector
A JS() wrapped javascript expression that returns a jQuery object.
- operation
A string to determine how to manipulate the mouse interaction. Can be one of
enable
,disable
,destroy
,save
andload
. Ignored whenui
is ashiny.tag
orshiny.tag.list
object. See Details.- options
A list of interaction_specific_options. Ignored when
operation
is set asdestroy
. This parameter also accept ashiny
option that controls the shiny input value returned from the element. See Details.
Details
The first parameter ui
determines the target ui and working mode. If the
target ui is a shiny.tag
(e.g., shiny inputs/outputs or ui created by
tags) or a shiny.tag.list
(by tagList()) object
or a static htmlwidget
, the functions return the a modified ui object with
interaction effects attached. When a
jQuery_selector or a javascript
expression is provided as the ui
parameter, the functions first use it to
locate the target ui element(s) in the shiny app, and then attach or manipulate
the interactions. Therefore, you can use the first way in the ui
of a shiny
app to create elements with interaction effects (the ui mode), or use the
second way in the server
to manipulate the interactions (the server mode).
The operation
parameter is valid only in server mode. It determines how to
manipulate the interaction, which includes:
enable
: Attach the corresponding mouse interaction to the target(s).disable
: Attach the interaction if not and disable it at once (only set the options).destroy
: Destroy the interaction.save
: Attach the interaction if not and save the current interaction state.load
: Attach the interaction if not and restore the target(s) to the last saved interaction state.
With mouse interactions attached, the corresponding interaction states, e.g.
position
of draggable, size
of resizable, selected
of selectable and
order
of sortable, will be sent to server side in the form of
input$<id>_<state>
. The default values can be overridden by setting the
shiny
option in the options
parameter. Please see the vignette
Introduction to shinyjqui
for more details.
Examples
library(shiny)
library(highcharter)
## used in ui
jqui_resizable(actionButton('btn', 'Button'))
#> <button id="btn" type="button" class="btn btn-default action-button">Button</button>
#> <iframe srcdoc="<p>cant catch me</p>" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({"ui":"[id='btn']","type":"interaction","func":"resizable","operation":"enable","options":{},"debug":false,"_js_idx":{"ui":false,"type":false,"func":false,"operation":false,"options":[],"debug":false}}); $(".jqui_self_cleaning_script").remove();}, 10);});"></iframe>
jqui_draggable(plotOutput('plot', width = '400px', height = '400px'),
options = list(axis = 'x'))
#> <div id="plot" class="shiny-plot-output" style="width:400px;height:400px;"></div>
#> <iframe srcdoc="<p>cant catch me</p>" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){$(document).one( events = "shiny:value", selector = "[id='plot']", handler = function(e) { setTimeout(function(){shinyjqui.msgCallback({"ui":"[id='plot']","type":"interaction","func":"draggable","operation":"enable","options":{"axis":"x"},"debug":false,"_js_idx":{"ui":false,"type":false,"func":false,"operation":false,"options":{"axis":false},"debug":false}}); $(".jqui_self_cleaning_script").remove();}, 10); } );});"></iframe>
jqui_selectable(
div(
id = 'sel_plots',
highchartOutput('highchart', width = '300px'),
plotOutput('ggplot', width = '300px')
),
options = list(
classes = list(`ui-selected` = 'ui-state-highlight')
)
)
#> <div id="sel_plots">
#> <div id="highchart" style="width:300px; height:400px; " class="highchart html-widget html-widget-output"></div>
#> <div id="ggplot" class="shiny-plot-output" style="width:300px;height:400px;"></div>
#> </div>
#> <iframe srcdoc="<p>cant catch me</p>" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({"ui":"[id='sel_plots']","type":"interaction","func":"selectable","operation":"enable","options":{"classes":{"ui-selected":"ui-state-highlight"}},"debug":false,"_js_idx":{"ui":false,"type":false,"func":false,"operation":false,"options":{"classes":{"ui-selected":false}},"debug":false}}); $(".jqui_self_cleaning_script").remove();}, 10);});"></iframe>
jqui_sortable(tags$ul(
id = 'lst',
tags$li('A'),
tags$li('B'),
tags$li('C')
))
#> <ul id="lst">
#> <li>A</li>
#> <li>B</li>
#> <li>C</li>
#> </ul>
#> <iframe srcdoc="<p>cant catch me</p>" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({"ui":"[id='lst']","type":"interaction","func":"sortable","operation":"enable","options":{},"debug":false,"_js_idx":{"ui":false,"type":false,"func":false,"operation":false,"options":[],"debug":false}}); $(".jqui_self_cleaning_script").remove();}, 10);});"></iframe>
## used in server
if (FALSE) {
jqui_draggable('#foo', options = list(grid = c(80, 80)))
jqui_droppable('.foo', operation = "enable")
}
## 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'))
)
)
}
## custom shiny input
func <- JS('function(event, ui){return $(event.target).offset();}')
options <- list(
shiny = list(
abs_position = list(
dragcreate = func, # send returned value back to shiny when interaction is created.
drag = func # send returned value to shiny when dragging.
)
)
)
jqui_draggable(highchartOutput('foo', width = '200px', height = '200px'),
options = options)
#> <div id="foo" style="width:200px; height:200px; " class="highchart html-widget html-widget-output"></div>
#> <iframe srcdoc="<p>cant catch me</p>" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){$(document).one( events = "shiny:value", selector = "[id='foo']", handler = function(e) { setTimeout(function(){shinyjqui.msgCallback({"ui":"[id='foo']","type":"interaction","func":"draggable","operation":"enable","options":{"shiny":{"abs_position":{"dragcreate":"function(event, ui){return $(event.target).offset();}","drag":"function(event, ui){return $(event.target).offset();}"}}},"debug":false,"_js_idx":{"ui":false,"type":false,"func":false,"operation":false,"options":{"shiny":{"abs_position":{"dragcreate":true,"drag":true}}},"debug":false}}); $(".jqui_self_cleaning_script").remove();}, 10); } );});"></iframe>