Draggable property dissapear with insertUi()

问题

I would like to create a draggable Ui object with insertUI(). A similar object has been created thanks to the actionButton() and it works fine. However, the draggable property has been removed.

I tried to add some piece of code such as tags$script('$(".draggable").draggable();') OR tags$script('$(".dragelement").on("dragstart",function(e){e.originalEvent.dataTransfer.setData("Text",e.target.id);});').

However, it doesn't work anymore. Does anybody have an idea ?

The following example come from http://shiny.rstudio.com/gallery/absolutely-positioned-panels.html.

library(shiny)
library(markdown)
### Ui.R
    ui <- fluidPage(
      actionButton("add", "Add UI"),
      absolutePanel(
        bottom = 20, 
        right = 20, 
        width = 300,
        draggable = TRUE,
        wellPanel(
          HTML(
            markdownToHTML(
              fragment.only=TRUE, 
              text=c(
                "This is an absolutePanel that uses `bottom` and `right` attributes.

                    It also has `draggable = TRUE`, so you can drag it to move it around the page.

                    The slight transparency is due to `style = 'opacity: 0.92'`.

                    You can put anything in absolutePanel, including inputs and outputs:"
              )
            )
          ),
          sliderInput("n", "", min=3, max=20, value=5),
          plotOutput("plot2", height="200px")
        )
      )
    )

###Server.R   
    server <- function(input, output, session) {
      observeEvent(input$add, {
        insertUI(
          selector = "#add",
          where = "afterEnd",
          ui =           
            tagList(
              absolutePanel(
                top = 80, 
                right = 20, 
                width = 300,
                draggable = TRUE,
                wellPanel(
                  HTML(
                    markdownToHTML(
                      fragment.only=TRUE, 
                      text=c(
                        "This is an absolutePanel that uses `bottom` and `right` attributes.

                    It also has `draggable = TRUE`, so you can drag it to move it around the page.

                    The slight transparency is due to `style = 'opacity: 0.92'`.

                    You can put anything in absolutePanel, including inputs and outputs:"
                      )
                    )
                  )
                )
              )
            )
        )
      })
    }

回答1:

I found a solution thanks to the jqui_draggable() which come from the shinyjqui package.

library(shinyjqui)
server <- function(input, output, session) {
  observeEvent(input$add, {
    insertUI(
      selector = "#add",
      where = "afterEnd",
      ui =  
        jqui_draggable(
        tagList(
          absolutePanel(
            top = 80, 
            right = 20, 
            width = 300,
            draggable = TRUE,
            wellPanel(
              HTML(
                markdownToHTML(
                  fragment.only=TRUE, 
                  text=c(
                    "This is an absolutePanel that uses `bottom` and `right` attributes.

                It also has `draggable = TRUE`, so you can drag it to move it around the page.

                The slight transparency is due to `style = 'opacity: 0.92'`.

                You can put anything in absolutePanel, including inputs and outputs:"
                  )
                )
              )
            )
          )
        )
        )
      )
    })
}

来源：https://stackoverflow.com/questions/55807452/draggable-property-dissapear-with-insertui

标签

Shiny