Drag n drop list Shiny JS

server.R

library(shiny)


shinyServer(function(input, output,session) {
  
  output$list <- renderUI({
    sortListInput("sortable",c(test1="one",test2="two"))
  })
})

sortList.js

$(document).on("sortupdate", "ul.sortableList", function(evt) {
    // evt.target is the button that was clicked
  var el = $(evt.target);
                 
  // Raise an event to signal that the value changed
  el.trigger("change");
});
var sortListInput = new Shiny.InputBinding();
$.extend(sortListInput, {
  find: function(scope) {
    return $(scope).find(".sortableList");
  },
  getValue: function(el) {
    return $(el).sortable("toArray");
  },
  setValue: function(el, value) {
    $(el).text(value);
  },
  subscribe: function(el, callback) {
    $(el).on("change.sortableList", function(e) {
      callback();
    });
  },
  unsubscribe: function(el) {
    $(el).off(".sortableList");
  }
});
Shiny.inputBindings.register(sortListInput, "sortListInput");
Shiny.inputBindings.setPriority("sortListInput", 10);

ui.R

library(shiny)

sortListInput <- function(inputId,data) {
  
  tagList(
    singleton(tags$head(tags$script(src = "js/sortList.js"))),
    HTML(paste('
         <ul id="',inputId,'" class="sortableList">
         ',paste('<li id="',data,'" class="ui-state-default">',if(is.null(names(data))) data else names(data),'</li>
         ',collapse="\n",sep=""),'</ul>',sep=""))
  )
}

shinyUI(pageWithSidebar(
  headerPanel("Drag n drop"),
  sidebarPanel(
    uiOutput("list")
  ),
  mainPanel(
    tags$head(HTML('<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <!--<link rel="stylesheet" href="/resources/demos/style.css">-->
  <style>
  .sortableList { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  .sortableList li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  .sortableList li span { position: absolute; margin-left: -1.3em; }
  </style>
  <script>
  $(function() {
    $( ".sortableList" ).sortable();
    $( ".sortableList" ).disableSelection();
  });
</script>')),
    sortListInput("sortable",c(test1="one",test2="two"))
  )
))