我想在闪亮中创建一个可拖动的 modalDialog

Posted 2023-03-24

【中文标题】我想在闪亮中创建一个可拖动的 modalDialog

【英文标题】：I want to create a draggable modalDialog in shiny

【发布时间】：2022-01-15 07:08:36

【问题描述】：

我想创建一个可拖动的shiny::modalDialog()，只有shiny 和JS/jQuery，而没有像shinyjqui 这样的其他包。 按照here 的示例，它应该很容易使用jQuerys .draggable 实现，因为单击modalDialog 时创建的modalDialog 具有引导类modal，但不知何故它不起作用。有人有什么建议吗？

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)

【问题讨论】：

为什么你不能使用专为处理这个问题而设计的包？

draggable 不属于 jQuery 而是属于 jQuery UI。

并且它属于 jQuery UI 有资格使用它吗？

【参考方案1】：

如果您不想使用shinyjqui，您仍然需要添加jQuery UI 才能使用.draggable。除了缺少 JS 库之外，您的代码也不起作用，因为您无法为尚不存在的元素启用可拖动功能。需要在showModal内创建模态框后添加JS代码。

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)

仍然可以像here 中描述的那样只使用 JS。