title: Any creative ways to add rank ordering numbering to this simple sortable package example?
body: <p>I am trying to rank order number the list elements in the “Drag to” panel on the right when running the below &quot;Reproducible Code&quot;. See image at the bottom for an illustration.</p>
  <p>I found an example, <a href="https://stackoverflow.com/questions/60880078/add-index-to-sortable-object-text-in-r-sortable">Add index to sortable object text in R Sortable</a>, where list elements are rank order numbered using HTML with the same sortable package. However, this example uses sortable's <code>bucket_list()</code> and <code>add_rank_list()</code> and that html snippet only works in conjunction with those functions. For “cloning” reasons I’m using <code>sortable_js()</code> instead of <code>bucket_list()</code> and <code>add_rank_list()</code>.</p>
  <p>How can I add rank order numbers to those list elements?</p>
  <p><strong>Reproducible Code:</strong></p>
  <pre><code>library(shiny)
  library(sortable)
  library(htmlwidgets)
  
  icons &lt;- function(x) {lapply(x,function(x){tags$div(tags$strong(x))})}
  
  ui &lt;- fluidPage(
    
    div(
      style = &quot;margin-top: 2rem; width: 60%; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start;&quot;,
  
      div(
        div(
          class = &quot;panel panel-default&quot;,
          div(class = &quot;panel-heading&quot;, &quot;Drag from here&quot;),
          div(
            class = &quot;panel-body&quot;,
            id = &quot;drag_from&quot;,
            icons(c(&quot;A&quot;, &quot;B&quot;, &quot;C&quot;, &quot;D&quot;, &quot;E&quot;))
          )
        ),
      ),
      div(
        div(
          class = &quot;panel panel-default&quot;,
          div(class = &quot;panel-heading&quot;, &quot;Drag to here&quot;),
          div(
            class = &quot;panel-body&quot;,
            id = &quot;drag_to&quot;
          )
        )
      )
    ),
    sortable_js(
      &quot;drag_from&quot;,
      options = sortable_options(
        group = list(
          pull = &quot;clone&quot;,
          name = &quot;group1&quot;,
          put = FALSE
        )
      )
    ),
    sortable_js(
      &quot;drag_to&quot;,
      options = sortable_options(
        group = list(
          group = &quot;group1&quot;,
          put = TRUE,
          pull = TRUE
        ),
        onAdd = htmlwidgets::JS() # something that works here to rank order number to each element dragged in?
      )
    ),
  )
  
  server &lt;- function(input, output) {}
  
  shinyApp(ui, server)
  </code></pre>
  <p><strong>Illustration:</strong></p>
  <p><a href="https://i.stack.imgur.com/mLpuZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mLpuZ.png" alt="enter image description here" /></a></p>