Moveable multiple Items in R Shiny boxes - something similar to attached screenshot

Question

I am trying to build a shiny application where I am trying to build a functionality similar to below screenshot:-

I have build something similar using Shinyjqui

Answer 1

Sorry for my poor English. I found jQuery Two side select box and I made shiny demo include this scripts. https://www.jqueryscript.net/form/Two-side-Multi-Select-Plugin-with-jQuery-multiselect-js.html

shiny with two side select box jQuery

It seems good but there is one problem that server can't get input values only options selected in right box.

# function for make UI HTML
MultiselectHTML <- function(mylist,myname){
  paste_sum <- ""
  for(i in 1:length(mylist)){
    paste_sum <- paste0(paste_sum,"",mylist[i],"")
  }

  # make tag list
  tagList(
    div(
      class = "item_search"
      ,div(class = "row",
           div(class = "col-xs-5",
               tags$select(name="from[]",id=myname,class = "form-control",multiple = "multiple",size = "8"
                           ,HTML(paste_sum)
               )
           )
           ,div(class = "col-xs-2"
                ,tags$button(type = "button",class = "btn btn-primary btn-block",id=paste0(myname,"_undo"),"undo")
                ,tags$button(type = "button",class = "btn btn-block",id=paste0(myname,"_rightAll"),tags$i(class = "glyphicon glyphicon-forward"))
                ,tags$button(type = "button",class = "btn btn-block",id=paste0(myname,"_rightSelected"),tags$i(class = "glyphicon glyphicon-chevron-right"))
                ,tags$button(type = "button",class = "btn btn-block",id=paste0(myname,"_leftSelected"),tags$i(class = "glyphicon glyphicon-chevron-left"))
                ,tags$button(type = "button",class = "btn btn-block",id=paste0(myname,"_leftAll"),tags$i(class = "glyphicon glyphicon-backward"))
                ,tags$button(type = "button",class = "btn btn-warning btn-block",id=paste0(myname,"_redo"),"redo")
           )
           ,div(class = "col-xs-5"
                ,tags$select(name="to[]",id=paste0(myname,"_to"), class="form-control" ,size="8", multiple="multiple")
           )
      )
    )
    ,br()
  )
}

ui <- fluidPage(
  tags$head(includeScript("www/multiselect.js"))
  ,tags$script(HTML(
    'jQuery(document).ready(function($) {
      $("#multiselect1").multiselect({
       search: {
       left: \'\',
       right: \'\',
       },
       fireSearch: function(value) {
       return value.length >= 1;
       }
       });
       });
     ')
  )
  ,MultiselectHTML(c("a","b","c","d","e"),"multiselect1")
  ,h5("Selected List :")
  ,textOutput("mselect")
)

server <- function(input, output, session) {
  output$mselect <- renderText({input$multiselect1_to})
}

shinyApp(ui = ui,server = server)