Sortable Widget

Panel
16

Hi @thetorque

You can use this version

import param
import panel as pn
pn.extension(js_files={'sortablelist': "https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"})

class Sortable(pn.reactive.ReactiveHTML):

    rows = param.List(default=[0,1,2,3,4,5])

    _template = """
      <div id="simpleList" class="list-group" style="font-size:48px"></div>
     """
    _scripts = {
    'render': """
var html = ""
data.rows.forEach(setRows);

function setRows(value, index, array) {
  html += `<div class="list-group-item">${value}</div>`
}
simpleList.innerHTML = html
""",
    'after_layout': """state.sortable = Sortable.create(simpleList, {
        onEnd: function(evt) {
        var element = data.rows[evt.oldIndex];
        list = data.rows
        list.splice(evt.oldIndex, 1);
        list.splice(evt.newIndex, 0, element);
        data.rows = list
    }
    });""",
    "rows": """
state.sortable.destroy()
self.render()
self.after_layout()
"""
   }
    
    @param.output(param.List)
    def list_out(self):
        return self.rows

sortable = Sortable(rows=["Original", "values"])

update_button = pn.widgets.Button(name="Update")

@pn.depends(value=update_button, watch=True)
def update(value):
    sortable.rows=["Some", "new", "values"]

accent="#7575FF"

pn.template.FastListTemplate(
  site="Awesome Panel", title="Community Question: Sortable list",
  main=[update_button, sortable, sortable.param.rows],
  accent_base_color=accent, header_background=accent
).servable()

I’ve created a bug report/ feature request here ReactiveHTML does not rerender loop in _template · Issue #3059 · holoviz/panel (github.com)