How to refer to reactive element in ui.R in Shiny

Question

I am making an app with drag and drop feature using the ShinyDND package. I would like to pass a list from input as a parameter of dragSetUI, a function that needs to be run in

Answer 1

Let's see why the renderUI approach does not work with shinyDND. An app using shinyDND is linked to the dragndrop.js file, which is in the shinyDND folder. In this file one can see:

$(document).ready(function(){
  ......
  $(".dragelement").on("dragstart",function(e){
    e.originalEvent.dataTransfer.setData("Text",e.target.id);
  });
  ......
});

This defines the action to perform on elements having class dragelement when a drag is starting, and this is defined when the document is ready. dragSetUI creates such elements.

When you use a dragSetUI inside a renderUI, this creates new elements of class dragelement. But the action defined on such elements in $(document).ready is not effective for these new elements, because this action has been defined just after the document is ready, and then before the effect of renderUI.

A solution consists in defining the action of the event dragstart inside the renderUI. This works:

library(shiny)
library(shinyDND)

nonreactive_choices<-as.list(c("a","b","c"))

ui <- shinyUI(
  mainPanel(
    textInput("choices","Put here d,e,f:"),
    dragSetUI("drag", textval = nonreactive_choices),
    uiOutput("dragset"),
    dropUI("drop")
  )
)

server = shinyServer(function(input, output,session) {

  reactive_choices <- reactive({
    strsplit(input$choices,",")[[1]]
  })

  output$dragset <- renderUI({
    tagList(
      dragSetUI("drag2", textval = as.list(reactive_choices())),
      tags$script('$(".dragelement").on("dragstart",function(e){
        e.originalEvent.dataTransfer.setData("Text",e.target.id);
      });'
      )
    )
  }) 
})

# Run the application 
shinyApp(ui = ui, server = server)