viewof demo = selectOrder([
"Peas",
"Apples",
"Bananas",
"Pears",
"Broccoli",
"Cabbage"
])
demo
function selectOrder(items, options) {
let dragging = null;
const list = html`<ul style="display: inline-block; min-width: 200px; margin: 5px 0; padding: 0; font-size: 0.85em;">${items.map(
i => html`
<li style="display: block; padding: 3px 5px 3px 0; border-top: ${topBorder}; border-bottom: ${bottomBorder}"><input type="checkbox" style="vertical-align: baseline; margin-right: 8px;" />${i}</li>
`
)}</ul>`;
function getValue() {
return Array.from(list.childNodes)
.filter(li => li.firstChild.checked)
.map(li => li.innerText);
}
function oninput(event) {
list.value = getValue();
}
return Object.assign(list, {
ondragstart,
ondragover,
ondragleave,
ondrop,
oninput,
value: getValue()
});
}
function reset(li) {
li.style['border-top'] = topBorder;
li.style['border-bottom'] = bottomBorder;
}
function getLi(target) {
while (
target.nodeName.toLowerCase() != 'li' &&
target.nodeName.toLowerCase() != 'body'
) {
target = target.parentNode;
}
if (target.nodeName.toLowerCase() == 'body') {
return false;
} else {
return target;
}
}
topBorder = 'solid 1px transparent'
bottomBorder = 'solid 1px #ddd'
dragBorder = 'solid 1px blue'
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.
