rstudio / sortable

R htmlwidget for Sortable.js
https://rstudio.github.io/sortable/
Other
127 stars 30 forks source link

docs: rank-list with pull = 'clone' feature #107

Open jhk0530 opened 9 months ago

jhk0530 commented 9 months ago

Hi, thanks for nice work.

Recently I'm trying to build rank_list (or bucket list) with items have clone feature

It seems that, only div with id works from official article's explanation.

using icon_list (custom function) works very cool. but I want to utilize Block-like elements with UI.

So I built custom function named clone_list that generates rank-list-item element as div with given id.

Below is minimal example to produce this.

example

library(shiny)
library(sortable)

clone_list <- function(id, x) {
  tags$div(
    class = "default-sortable rank-list-container",
    id = id,
    lapply(x,
      function(x) {
        tags$div(
          class = "rank-list-item",
          style = # Button-like UI element
          "border-radius: 3px; 
          display: block;
          padding: 10px 15px;
          background-color: #f8f8f8;
          border: 1px solid #ddd;
          cursor: grab;",
          tags$strong(x)
        )
      }
    )
  )
}

ui <- fluidPage(
  fluidRow(
    column(
      width = 3,
      h5("From here"),
      clone_list(id = "sort1", c("A", "B", "C", "D", "E"))
    ),
    column(
      width = 3,
      h5("To here"),
      rank_list(
        text = NULL,
        labels = NULL,
        input_id = "group1",
        options = sortable_options(group = "sortGroup1"),
        orientation = "horizontal"
      )
    )
  ),
  sortable_js(
    "sort1", # Variable Holder
    options = sortable_options(
      group = list(
        name = "sortGroup1",
        pull = "clone",
        put = FALSE
      )
    )
  )
)

server <- function(input, output) {
}
shinyApp(ui, server)

If it's ok, I'd like to make article and contribute as PR.

Thanks. Kim