Catch items in bucket list on the server side when Shiny is launched

Hello guys,

Below is a Shiny app of the bucket list in "sortable". Does anyone have ideas on how to capture the items in the bucket list when Shiny is launched/refreshed?

The issues are:

  1. After the app is launched, "C" is expected to appear under "Letters under C", while it is empty.

  2. Drag "a" and "b" to "C" and click "Reset", then "C" is expected to appear under "Letters under C", while "C", "a", and "b" are there.

library(shiny);  library(sortable)

# Helper function.
ft_js <- function(x) {
  sortable_js(css_id = x,
    options = sortable_options(
      multiDrag = NULL, sort = FALSE, animation = 1000, direction = NULL, 
      group = list(name = "sortGroup1", put = TRUE),
      onSort = sortable_js_capture_input(x)
    )
  )
}

ui <- fluidPage(
  column(3, strong('Letters under C:'), textOutput('match')), column(1, actionButton("reset", 'Reset', icon=icon("reset"))), br(),
  uiOutput('ft.match')
)

server <- function(input, output, session) {
  output$ft.match <- renderUI({                                                                                                    
    input$reset                                                                                                          
    fluidRow(                                                                                                                      
      span(class = "panel panel-default", style = 'margin-left:0px', div(class = "panel-heading", strong("Section1")),                                                                  
        div(class = "panel-body", id = "ftSVG", 
        tag("span", list(class = class('a'), tags$span(class = "glyphicon glyphicon-move"), 'a')),
        tag("span", list(class = class('b'), tags$span(class = "glyphicon glyphicon-move"), 'b'))
        )                                                                
      ),                                                                                                                           
      div(class = "panel panel-default",                                                                                           
        div(class = "panel-heading", strong("Section2")),                                                                  
        span(class = "panel panel-default",
        div(class = "panel-heading", 'C'), 
        div(class = "panel-body", id = 'C', tag("span", list(class = class('C'), tags$span(class = "glyphicon glyphicon-move"), 'C')))
        )                                                                                  
      ), lapply(c('ftSVG', 'C'), ft_js)                        
    )                                                                                                                              
  })
  output$match <- renderText({ input[['C']] })
}
shinyApp(ui, server) 

Regards,
Jianhai

This worked for me first time I tried it (admittedly using the dev version).

Please let me know:

  • Your version of sortable
  • Your browser

(The dev version fixes an issue on Safari. See Update sortable.js to version 1.13.0 · Issue #73 · rstudio/sortable · GitHub for details.)

@andrie Thanks for your quick reply!

My browser is google chrome Version 90.0.4430.93 (Official Build) (64-bit),
The issue still exists on the sortable dev version (0.4.4.9000), installed with remotes::install_github("rstudio/sortable").