The avatar for @andyreagan
Andy Reagan
Senior Data Scientist, MassMutual Lecturer, UC Berkeley MIDS -- PhD Applied Math, Computational Story Lab, UVM MS Applied Math, UVM BS Math, Virginia Tech
Public
JS Utilities
Edited
Apr 1, 2023
1 fork
Importers
4 stars
Insert cell
Insert cell
viewof list = SortableList(["item 1", "item 2"])
Insert cell
list
Insert cell
Insert cell
sortable = import(
"https://unpkg.com/sortablejs@1.15.0/modular/sortable.esm.js?module"
)
Insert cell
Insert cell
SortableList = function(input_list) {
const element = html`<ol>${input_list.map((d) => html`<li>${d}</li>`)}</ol>`;

element.value = Array.from(element.getElementsByTagName("li")).map(
(x) => x.outerText
);

const onChangeFun = function () {
element.value = Array.from(element.getElementsByTagName("li")).map(
(x) => x.outerText
);
element.dispatchEvent(new Event("input", { bubbles: true }));
};

var s = sortable.Sortable.create(element, {
onChange: onChangeFun
});

return element;
}
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more