How to make the modal dialogue box draggable when rendered with renderUI()?

Question

I'm trying to make the modal dialogue box draggable in the below code but no luck yet. The modal dialogue is triggered by clicking on the python icon. I need a draggable box because the explanatory text in the full App is long and most users will want to move the dialogue box over so they can see the plot that is being explained. All lines in my attempt to create a draggable modal dialogue in the below code are flagged with ###, which lines were taken from I want to create a draggable modalDialog in shiny but doesn't work in my case. It may not work for me because of my use of renderUI(). Is there a solution to this in my case?

Code:

library(shiny)

ui <- fluidPage(
  tags$head(tags$script(src="https://code.jquery.com/ui/1.13.0/jquery-ui.js")), ###
  selectInput("distSelect","Select distribution:",c("Weibull","Gamma")),
  uiOutput("plotHeader"),
  fluidRow(plotOutput("plot"))
)

server <- function(input, output, session) {
  
  output$plot <- renderPlot({curve(pweibull(x,shape=1.5,scale=1/0.03,lower.tail=F),from=0,to=80)})

  output$plotHeader <- renderUI({
    fluidPage(
      paste(input$distSelect,"Distribution"), 
      div( ###
        style = "margin: 4rem; display: flex;", ###
        div(   ###
          tags$button(
            id = "explainBtn",
            class = "btn action-button",
            tags$img(src = "https://images.plot.ly/language-icons/api-home/python-logo.png")
          )
        ) ###
      ) ###
    )
  })
  
  observeEvent(input$explainBtn, {
    showModal(
      tagList( ###
        modalDialog(if(input$distSelect == "Weibull"){"Weibull..."}),
        tags$script(HTML('$(".modal").draggable({ ###
                      handle: ".modal-header" ###
                      });')) ###
        )
      ) ###
  })
  
}
shinyApp(ui, server)

score 2 · Accepted Answer · answered Apr 17 '23 at 06:39

Please check shinyjqui::jqui_draggable.

library(shiny)
library(shinyjqui)

ui <- fluidPage(
  selectInput("distSelect","Select distribution:",c("Weibull","Gamma")),
  uiOutput("plotHeader"),
  fluidRow(plotOutput("plot"))
)

server <- function(input, output, session) {
  
  output$plot <- renderPlot({curve(pweibull(x,shape=1.5,scale=1/0.03,lower.tail=F),from=0,to=80)})
  
  output$plotHeader <- renderUI({
    fluidPage(
      paste(input$distSelect,"Distribution"), 
      div( ###
        style = "margin: 4rem; display: flex;", ###
        div(   ###
          tags$button(
            id = "explainBtn",
            class = "btn action-button",
            tags$img(src = "https://images.plot.ly/language-icons/api-home/python-logo.png")
          )
        ) ###
      ) ###
    )
  })
  
  observeEvent(input$explainBtn, {
    showModal(
      jqui_draggable(modalDialog(if(input$distSelect == "Weibull"){"Weibull..."}))
      )
  })
  
}
shinyApp(ui, server)

PS: Furthermore, you might want to check library(cicerone).

How to make the modal dialogue box draggable when rendered with renderUI()?

1 Answers1