'How to wrap up Image as a floating window in R shiny

I want to develop a feature that when opening the switch the image can show outside of the page and when closing the switch, the image is hidden. Here is my sample code for showing/hiding the image in the page but if we can make the image be a floating window and can be moved around the exiting app page?

library("shinydashboard")
library("shinyWidgets")

ui <- fluidPage(
  h4("Embedded image"),
  uiOutput("img"),
  fluidRow(
    tags$h4("Show and Hide Image"),
    materialSwitch(
      inputId = "get_image",
      label = "Show Image", 
      value = FALSE,
      status = "success"
    ),
  ),
)

server <- function(input, output, session) {
  
  observeEvent(input$get_image, {
    if(input$get_image == TRUE){
      output$img <- renderUI({
        tags$img(src = "https://www.r-project.org/logo/Rlogo.png")
      })
    }else{
      output$img <- NULL
    }
  })


}

shinyApp(ui, server)


Solution 1:[1]

Something like this?

library(shiny)
library("shinydashboard")
library("shinyWidgets")

ui <- fluidPage(
  h4("Embedded image"),
  uiOutput("img"),
  fluidRow(
    tags$h4("Show and Hide Image"),
    materialSwitch(
      inputId = "get_image",
      label = "Show Image", 
      value = FALSE,
      status = "success"
    ),
  ),
)

server <- function(input, output, session) {
  
  
  output$img <- renderUI({
    if(input$get_image)
      absolutePanel(
        tags$img(src = "https://www.r-project.org/logo/Rlogo.png", width = "512"),
        draggable = TRUE
      )
  })
  
  
}

shinyApp(ui, server)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Stéphane Laurent