You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
import { onCleanup, onMount } from "solid-js";
|
|
import Sortable from "sortablejs";
|
|
|
|
// https://github.com/SortableJS/Sortable
|
|
|
|
export const sortable = (el: HTMLElement, config: () => any) => {
|
|
onMount(function () {
|
|
const config_ = config();
|
|
|
|
const userOnEnd = config_?.onEnd;
|
|
if (userOnEnd) {
|
|
config_.onEnd = (evt) => {
|
|
const parent = evt.from;
|
|
const oldNextSibling =
|
|
parent.children[evt.oldIndex + (evt.oldIndex > evt.newIndex ? 1 : 0)];
|
|
if (oldNextSibling) {
|
|
parent.insertBefore(evt.item, oldNextSibling);
|
|
} else {
|
|
parent.append(evt.item);
|
|
}
|
|
|
|
userOnEnd(evt);
|
|
};
|
|
}
|
|
|
|
const sortable = Sortable.create(el, config_);
|
|
|
|
onCleanup(function () {
|
|
sortable.destroy();
|
|
});
|
|
});
|
|
};
|
|
|
|
declare module "solid-js" {
|
|
namespace JSX {
|
|
interface Directives {
|
|
sortable: any;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
let sortableDiv: HTMLDivElement = undefined;
|
|
onMount(function () {
|
|
const sortable = Sortable.create(sortableDiv, {
|
|
dragClass: "sortable-drag-card",
|
|
ghostClass: "sortable-ghost-card",
|
|
filter: ".drag-disabled",
|
|
forceFallback: true,
|
|
onEnd: (evt) => {
|
|
const parent = evt.from;
|
|
const oldNextSibling =
|
|
parent.children[evt.oldIndex + (evt.oldIndex > evt.newIndex ? 1 : 0)];
|
|
if (oldNextSibling) {
|
|
parent.insertBefore(evt.item, oldNextSibling);
|
|
} else {
|
|
parent.append(evt.item);
|
|
}
|
|
|
|
setPositions(
|
|
produce((positions: any[]) => {
|
|
let item = positions[evt.oldIndex];
|
|
positions.splice(evt.oldIndex, 1);
|
|
positions.splice(evt.newIndex, 0, unwrap(item));
|
|
})
|
|
);
|
|
},
|
|
});
|
|
|
|
onCleanup(function () {
|
|
sortable.destroy();
|
|
});
|
|
});
|
|
*/
|