Skip to content

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

@jhk0530

Description

@jhk0530

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions