drag and drop a new element

app.R

library(shiny)
library(purrr)

ui <- fluidPage(
  tags$head(
    tags$link(rel = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"),
    tags$script(src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"),
    tags$link(href = "style.css", rel = "stylesheet")
  ),
  fluidRow(
    verbatimTextOutput("debug")
  ),
  fluidRow(
    div(
      class = "col-xs-12 col-sm-3",
      h4("Add Input"),
      tags$ul(
        id = "sortable",
        tags$li(
          id = "dropdown",
          class = "ui-state-default",
          "Car Type"
        )
      )
    ),
    div(
      class = "col-xs-12 col-sm-9",
      h4("Drop Here"),
      div(
        id = "droppable",
        class = "ui-widget-header sortTxtbox"
      )
    )
  ),
  # from shiny:::selectizeIt()
  # just have to make sure that the selectize dependency is included
  htmltools::htmlDependency(
    "selectize", 
    "0.11.2", 
    c(href = "shared/selectize"),
    stylesheet = "css/selectize.bootstrap3.css", 
    head = format(tagList(
      HTML("<!--[if lt IE 9]>"),
      tags$script(src = "shared/selectize/js/es5-shim.min.js"),
      HTML("<![endif]-->"), tags$script(src = "shared/selectize/js/selectize.min.js")
    ))
  ),
  tags$script(src = "script.js")
)

server <- function(input, output, session) {
  output$debug <- renderPrint({
    names(input) %>% 
      sort() %>% 
      set_names() %>% 
      map(~ input[[.x]]) %>% 
      str()
  })
}

shinyApp(ui, server)

www_script.js

$(function () {
  $("#sortable").sortable();
  $("#sortable").disableSelection();
});

// get the length every select in the droppable div
// create unique ids for each
function getNewId(type) {
  var newId;  
  newId = $('#droppable').find('select').length  
  return type + (newId + 1);
}

$(function () {
  $(".draggable").draggable();
  $("#droppable").droppable({
    drop: function (event, ui) {
    var draggableId = ui.draggable.attr("id");
    var newid = getNewId(draggableId);
  
    // selectInput('${newid}', "${newid}", choices = c("Volvo", "Saab", "Fiat", "Audi"))
    $(this).append(`<div class="form-group shiny-input-container">
      <label class="control-label" for="${newid}">${newid}</label>
      <div>
      <select id="${newid}"><option value="Volvo" selected>Volvo</option>
      <option value="Saab">Saab</option>
      <option value="Fiat">Fiat</option>
      <option value="Audi">Audi</option></select>
      <script type="application/json" data-for="${newid}" data-nonempty="">{}</script>
      </div>
    </div>`)
    Shiny.initializeInputs()
    Shiny.bindAll()
    }
  });
});

www_style.css

#sortable, #sortable1 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

li {
   list-style-type: none;
}

#sortable li {
  margin: 5px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  width: 146px;
  border: 1px solid lightgray;
}

#sortable li:hover {
  cursor: grab;
}

#sortable .ui-sortable-helper {
  background-color: #ddd;
  border-color: black;
}
#sortable .ui-sortable-helper:hover {
  cursor: grabbing;
}

#droppable {
  border: 2px dashed #466683;
  padding: 1em;
  min-height: 200px;
}

#droppable.ui-droppable-hover {
  background: #bad4ed;
}

#droppable select {
  margin: 5px;
}