Sortability for multiple elements (e.g. in multiple columns and rows)

I am trying to have something like: https://jsfiddle.net/ramnathv/1064q7jm/?utm_source=website&utm_medium=embed&utm_campaign=1064q7jm in shiny.

My attempts: If i try to make two fluidRows then only the rows are draggable. So i tried to put them in one row (like in the fiddle. What is very odd: The closest i got by making an error (see the two divs with same id). When i remove one of them, i cant move the four elements seperately.

ui <- bootstrapPage(
    tags$style(".placeholder {
    border: 5px solid green;
    background-color: yellow;
    -webkit-box-shadow: 0px 0px 10px #888;
    -moz-box-shadow: 0px 0px 10px #888;
    box-shadow: 0px 0px 10px #888;
}
.tile {
             height: 100px;
             }
             .grid {
             margin-top: 1em;
             }"),
    jqui_sortabled(div(id = "all",
                 fluidRow(
                   div(id = "all",
                    column(5,
                          plotOutput("plot1")
                   ),
                   column(5,
                          plotOutput("plot2")
                   ),
                   column(5,
                          plotOutput("plot3")
                   ),
                   column(5,
                          plotOutput("plot4")
                   )
                 )
                ),
                options = list(
                  tolerance = 'pointer',
                  revert = 'invalid',
                  placeholder = 'span5 well placeholder tile',
                  forceHelperSize = "true"
                )
      )
    )
)

server <- function(input, output){
  output$plot1 <- renderPlot(plot(1, main = 1))
  output$plot2 <- renderPlot(plot(2, main = 2))
  output$plot3 <- renderPlot(plot(3, main = 3))
  output$plot4 <- renderPlot(plot(4, main = 4))
}
shinyApp(ui, server)

Yang-Tang / shinyjqui

Sortability for multiple elements (e.g. in multiple columns and rows) #31