使用 jquery UI 闪亮

Question

我想将jquery UI与shiny（不使用shinyjqui库）一起使用。当我有一个图层并尝试使用 jqueryUI 移动它时，它工作得很好，但是当使用 insertUI 动态生成该图层时，它就不起作用了。

\n\n

这是代码：

\n\n

library(shiny)\n\nui <- fluidPage(theme = "style.css",\n            tags$script(src = "jquery-ui.js"),\n            tags$script(src = "script2.js"),\n            actionButton("add","Add layer"),\n            div(class="aux"),\n            div(id="works",style="width:300px;height:200px;background:red"))\n\n\n\nserver <- function(input, output, session) {\n\n    observeEvent(input$add,{\n    insertUI(\n      selector = ".aux",\n      where="afterEnd",\n      ui  = div(id=paste0("new",input$add),style="width:300px;height:200px;background:blue")\n\n    )\n\n\n  })\n\n\n\n\n\n\n}\nshinyApp(ui, server)\n

\n\n

以及js脚本

\n\n

  $( function() {\n\n\n    $("#works").draggable();\n    $("#new1").draggable();\n\n\n  });\n

\n\n

谢谢！

\n

Answer 1

那是因为#new1在启动时不存在。您必须在创建 JavaScript 代码后执行它，例如shinyjs::runjs。并使用immediate=TRUE在insertUI.

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  tags$head(
    tags$script(src = "jquery-ui/jquery-ui.min.js"),
    tags$script("$(function() {
                    $('#works').draggable();
                })")
  ),
  actionButton("add","Add layer"),
  div(class="aux"),
  div(id="works",style="width:300px;height:200px;background:red"))

server <- function(input, output, session) {

  observeEvent(input$add,{
    insertUI(
      selector = ".aux",
      where="afterEnd",
      ui = div(id=paste0("new",input$add), style="width:300px;height:200px;background:blue"),
      immediate = TRUE
    )
    runjs("$('#new1').draggable();")
  })

}

shinyApp(ui, server)