I want to create a draggable shiny::modalDialog() with just shiny and JS/jQuery and without other packages like shinyjqui.
Following the example from here it should be easily achievable with the jQuerys .draggable sine the modalDialog created when clicking on the actionButton has bootstrap class modal, but somehow it does not work. Does anybody has some advice?
library(shiny)
library(bslib)
ui = fluidPage(theme = bs_theme(version = 5),
div(style = "margin: 4rem; display: flex; justify-content: center;",
div(
actionButton(inputId = "action", label = "open modal"))),
tagList(
tags$script(HTML('$(".modal").draggable({
handle: ".modal-header"
});')))
)
server = function(input, output, session){
observeEvent(input$action, {
showModal(
modalDialog(
title = "Modal", easyClose = T))
})
}
shinyApp(ui, server)
If you don't want to use shinyjqui you still need to add jQuery UI to use .draggable. Additionally to the missing JS library, your code doesn't work because you can not enable draggable functionality to an element that doesn't exist yet. You need to add the JS code just after the creation of the modal inside showModal.
library(shiny)
library(bslib)
ui = fluidPage(theme = bs_theme(version = 5),
tags$head(tags$script(src="https://code.jquery.com/ui/1.13.0/jquery-ui.js")),
div(style = "margin: 4rem; display: flex; justify-content: center;",
div(
actionButton(inputId = "action", label = "open modal"))
)
)
server = function(input, output, session){
observeEvent(input$action, {
showModal(
tagList(
modalDialog(title = "Modal", easyClose = T),
tags$script(HTML('$(".modal").draggable({
handle: ".modal-header"
});'))
)
)
})
}
shinyApp(ui, server)
It is still possible to use only JS as is described here.