Cloning and removing elements"

In sortable: Drag-and-Drop in 'shiny' Apps with 'SortableJS'

knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)

Introduction

Sometimes you want the ability to drag an item multiple times from a list, in other words the ability to "clone" the items of the original list.

And you may also then want the ability to remove cloned items, possibly by dragging to a "bin" or "remove item" list.

Cloning an element

To clone an element from a list, you must add the pull = "clone" option to the sortable_options argument::

library(sortable)

sortable_js(
  "sort1",
  options = sortable_options(
    group = list(
      pull = "clone",
      name = "sortGroup1",
      put = FALSE
    ),
    onSort = sortable_js_capture_input("sort_vars")
  )
)

Removing an element

To remove an element from the dropped list, one option is to create a "bin" area by using the JavaScript code:

this.el.removeChild(evt.item);

Then add to this JavaScript to the onAdd element of sortable_options(). To pass your JavaScript code to R, use the htmlwidgets::JS() function:

sortable_js(
  "sortable_bin",
  options = sortable_options(
    group = list(
      group = "sortGroup1",
      put = TRUE,
      pull = TRUE
    ),
    onAdd = htmlwidgets::JS("function (evt) { this.el.removeChild(evt.item); }")
  )
)

Full example

And the full code:

knitr::read_chunk(
  system.file("shiny-examples/clone_remove/app.R", package = "sortable")
)

sortable documentation built on March 31, 2023, 9:35 p.m.