Help to make shiny modals draggable

[rpodcast]

First I want to thank you for creating such a great package! There are a lot of useful widgets that I plan on incorporating in my future shiny applications. One idea I had was actually brought up in issue 1698 in the shiny issue tracker about making the modal dialogs draggable. I'm thinking this could be accomplished using shinyjqui and either the draggabled or draggable functions, but I can't seem to get it to work. See below for an simple app I made to try out a solution. The aforementioned issue linked this SO post which has a working solution with javascript, so it seems like it is possible and I'm just not using the package functions correctly. Any ideas on how to accomplish this using shinyjqui?

library(shiny)
library(shinyjqui)

ui <- fluidPage(
   includeJqueryUI(),
   titlePanel("Old Faithful Geyser Data"),
   sidebarLayout(
      sidebarPanel(
         actionButton("show", "Show modal dialog")
      ),
      mainPanel(
        h1("hello")
      )
   )
)

server <- function(input, output, session) {
   observeEvent(input$show, {
     showModal(modalDialog(
       title = "Important message",
       "This is an important message!",
       easyClose = TRUE
     ))
   })
   jqui_draggable(selector = '#modal-content')
}

shinyApp(ui = ui, server = server)

[Yang-Tang]

Hi @thercast, please see my modified code below: modal-content is a class name in shiny modal, so .modal-content was used as the selector. I put the jqui_draggable call inside the observeEvent just after the showModal, so that, each time the modalDialog is showed, shinyjqui can find it and make it draggable.

library(shiny)
library(shinyjqui)

ui <- fluidPage(
  includeJqueryUI(),
  titlePanel("Old Faithful Geyser Data"),
  sidebarLayout(
    sidebarPanel(
      actionButton("show", "Show modal dialog")
    ),
    mainPanel(
      h1("hello")
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$show, {
    showModal(modalDialog(
      title = "Important message",
      "This is an important message!",
      easyClose = TRUE
    ))
    jqui_draggable(selector = '.modal-content')
  })

}

shinyApp(ui = ui, server = server)

[rpodcast]

Works perfectly, thanks so much!