feat: implement sortable directive
parent
11a8bd29d0
commit
0095b11b1b
@ -0,0 +1,74 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
*/
|
Loading…
Reference in New Issue