Allow for item to be dragged multiple times with jqui_sortable
MayaGans opened this issue · comments
First of all thanks for this incredible package I am so excited to have the functionality of jQuery drag-drop in a shiny app!!!
I was wondering if it's possible to drag an item from row_source to row_dest multiple times [i.e. once I drag A to row_dest another A appears in row_source that can be dragged into row_dest]
library(shiny)
library(shinyjqui)
ui <- fluidPage(
sidebarPanel(
fluidRow(
column(6, jqui_sortable(div(id = "row_source", style = "min-height: 200px; border:2px solid #000000;", div(id = "A", "A"), div(id = "B", "B"), div(id = "C", "C"), div(id = "D", "D")),options = list(connectWith = "#row_dest"))),
column(6, jqui_sortable(div(id = "row_dest", style = "min-height: 200px; border:2px solid #000000"), options = list(connectWith = "#row_source")))
)
),
mainPanel(verbatimTextOutput('order'))
)
server <- function(input, output, session) {
output$order <- renderPrint({
print(input$row_dest_order)
})
}
shinyApp(ui, server)
I've been looking into the code and was wondering if I could leverage
shinyjqui/inst/www/shinyjqui.js
Line 572 in 136d01e
Line 74 in ddc8710
helper = "clone" to the options list in jqui_sortable
Something Like:
library(shiny)
library(shinyjs)
ui <- fluidPage(
sidebarPanel(
fluidRow(column(6,"From",
jqui_sortable(div(id = "source", div("Block",
style="background-color:grey;text-align:center;color:white;box-shadow: 0 0 10px rgba(0, 0, 0, 0.7)"),
style = "border: 1px solid black;padding:10px;min-height:50px;"),
options = list(connectWith = "#dest", helper = "clone"))),
column(6, "To",
jqui_sortable(div(id = "dest", style = "border: 1px solid black;padding:10px;min-height:50px"),
options = list(connectWith = "#source")))
)
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Where once the Block is dragged another "Block" appears in the from div. I assume this is possible since it just requires adopting code from the orderInput function?
Hi @MayaGans , you are right. In order to drag multiple times, you need to set each item of row_source as draggable and use the connectToSortable option. Here is the code:
library(shiny)
library(shinyjqui)
# generate custom shiny option with js code to extract the text of each items in "row_dest"
func <- 'function(event, ui){
return $(event.target).children().text();
}'
shinyopt <- list(
order = list(
`sortcreate sortupdate` = htmlwidgets::JS(func)
)
)
ui <- fluidPage(
sidebarPanel(
fluidRow(
column(6, div(id = "row_source",
style = "min-height: 200px; border:2px solid #000000;",
jqui_draggable(div(id = "A", "A"),
options = list(connectToSortable = "#row_dest", helper = "clone")),
jqui_draggable(div(id = "B", "B"),
options = list(connectToSortable = "#row_dest", helper = "clone")),
jqui_draggable(div(id = "C", "C"),
options = list(connectToSortable = "#row_dest", helper = "clone")),
jqui_draggable(div(id = "D", "D"),
options = list(connectToSortable = "#row_dest", helper = "clone")) )
),
column(6, jqui_sortable(div(id = "row_dest",
style = "min-height: 200px; border:2px solid #000000"),
options = list(shiny = shinyopt))) # apply custom shiny option here
)
),
mainPanel(verbatimTextOutput('order'))
)
server <- function(input, output, session) {
output$order <- renderPrint({
# in multiple drag mode input$row_dest_order will not work unless using the custom shiny option
print(input$row_dest_order)
})
}
shinyApp(ui, server)