Drag & drop with sortable

[BorisDelange]

Hi,

Do you think it could be possible to drag & drop Pivot with sortable, as it is done there with tabsetPanel ?

https://cran.r-project.org/web/packages/sortable/vignettes/understanding_sortable_js.html

Thanks !

[jakubsob]

Hi @BorisDelange,

It is possible! The reason why it doesn't work out-of-the-box for Pivot, but does for tabsetPanel is that sortable is applied to children of a component with given id. Let's take a look.

Case: shiny::tabsetPanel

library(shiny)
library(shiny.fluent)
library(sortable)

shinyApp(
  ui = fluidPage(
    tabsetPanel(
      id = "pivot",
      tabPanel(title = "Tab 1", "Hello 1"),
      tabPanel(title = "Tab 2", "Hello 2"),
    ),
    sortable_js("pivot")
  ),
  server = function(input, output) {}
)

Tabset created in this case looks like this:

<div class="tabbable">
  <ul class="nav nav-tabs shiny-tab-input" id="pivot" data-tabsetid="5508">
    <li class="active">
      <a href="#tab-5508-1" data-toggle="tab" data-bs-toggle="tab" data-value="Tab 1">Tab 1</a>
    </li>
    <li>
      <a href="#tab-5508-2" data-toggle="tab" data-bs-toggle="tab" data-value="Tab 2">Tab 2</a>
    </li>
  </ul>
  <div class="tab-content" data-tabsetid="5508">
    <div class="tab-pane active" data-value="Tab 1" id="tab-5508-1">Hello 1</div>
    <div class="tab-pane" data-value="Tab 2" id="tab-5508-2">Hello 2</div>
  </div>
</div>

sortable_js is applied to component with id="pivot" which has 2 children <li> which are tab buttons. It works as expected. Now let's take a look what happens when we apply the same to Pivot.

Case: shiny.fluent::Pivot

library(shiny)
library(shiny.fluent)
library(sortable)

shinyApp(
  ui = fluentPage(
    Pivot(
      id = "pivot",
      PivotItem(headerText = "Tab 1", Label("Hello 1")),
      PivotItem(headerText = "Tab 2", Label("Hello 2"))
    ),
    sortable_js("pivot")
  ),
  server = function(input, output) {}
)

What happens now is that we can move the whole bar containing "Tab 1" and "Tab 2" below "Hello 1" label. Let's take a look at the HTML:

<div class="react-container">
  <div role="toolbar" id="pivot">
    <div class="ms-FocusZone css-62 ms-Pivot root-53" ...>
      <button type="button" id="Pivot0-Tab0" ...>.. Tab 1 ></button>
      <button type="button" id="Pivot0-Tab1" ...>... Tab 2 ></button>
    </div>
    <div role="tabpanel" ...>
      <div><label class="ms-Label root-72">Hello 1</label></div>
    </div>
  </div>
</div>

I've used ... to remove irrelevant details. Now a component with id="pivot" also contains 2 children, but they're not tab buttons, it's a div containing tab buttons and div with tab content. That's why those 2 are sortable and not "Tab 1" and "Tab 2" buttons. In order to make "Tab 1" and "Tab 2" sortable we need to select the child of <div role="toolbar" id="pivot"> with sortable_js. We can achieve this with a tiny bit of JS:

library(shiny)
library(shiny.fluent)
library(sortable)

shinyApp(
  ui = fluentPage(
    Pivot(
      id = "pivot",
      PivotItem(headerText = "Tab 1", Label("Hello 1")),
      PivotItem(headerText = "Tab 2", Label("Hello 2"))
    ),
    tags$script('$("#pivot").children().first().attr("id", "pivot_tabs");'),
    sortable_js("pivot_tabs")
  ),
  server = function(input, output) {}
)

it results in this HTML:

<div class="react-container">
  <div role="toolbar" id="pivot">
    <div class="ms-FocusZone css-62 ms-Pivot root-53" id="pivot_tabs"...>
      <button type="button" id="Pivot0-Tab0" ...>... Tab 1 ></button>
      <button type="button" id="Pivot0-Tab1" ...>... Tab 2 ></button>
    </div>
    <div role="tabpanel" ...>
      <div><label class="ms-Label root-72">Hello 1</label></div>
    </div>
  </div>

Now we've added an id="pivot_tabs" to the child of id="pivot" and changed which component should be sortable to "pivot_tabs". Now it works as desired!

Hope it helps. Let us know if you have more questions

[BorisDelange]

Thanks a lot, it works perfectly !

To track Pivot order (from here) :

library(shiny)
library(shiny.fluent)
library(sortable)

update_notifier <- htmlwidgets::JS("function(evt) { Shiny.setInputValue('pivot_order', evt.from.innerText);}")

shinyApp(
  ui = fluentPage(
    Pivot(
      id = "pivot",
      PivotItem(headerText = "Tab 1", Label("Hello 1")),
      PivotItem(headerText = "Tab 2", Label("Hello 2")),
      PivotItem(headerText = "Tab 3", Label("Hello 2"))
    ),
    tags$script('$("#pivot").children().first().attr("id", "pivot_tabs");'),
    sortable_js("pivot_tabs", options = sortable_options(onUpdate = update_notifier)),
    verbatimTextOutput("pivot_order_text")
  ),
  server = function(input, output) {
    output$pivot_order_text <- renderText(input$pivot_order)
  }
)