I want to create a draggable modalDialog in shiny

Question

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)

and that it belongs to jQuery UI qualifies it for that I can not use it? — werN, Dec 10 '21 at 16:03

score 2 · Accepted Answer · answered Dec 10 '21 at 21:17

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.

Why can't I call `tags$script(HTML('$(".modal").draggable();'))` anywhere other than inside the `tagList`? For instance, why won't `shinyjs::runjs()` work as a separate argument? Thanks. — kraggle, Nov 29 '22 at 21:36

score 0 · Answer 2 · answered Jul 20 '23 at 19:07

Heres a reprex with the shinyjqui package. Thanks Dean Attali for the wisdom and knowledgebase.

library(shiny)
library(shinydashboard)
library(shinyjqui)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody()
)

server <- function(input, output) {

  showModal(
      shinyjqui::draggableModalDialog()
  )
}

shinyApp(ui, server)

I want to create a draggable modalDialog in shiny

2 Answers2

Linked