verstak
Version:
Verstak - Front-End Library
38 lines (37 loc) • 1.91 kB
JavaScript
import { ReactiveTreeNode, Mode } from "reactronic";
import { Div } from "./HtmlElements.js";
import { Fragment } from "../core/Elements.js";
export function DraggableArea(draggingId, builder) {
return (Div(ReactiveTreeNode.withBasis(builder, {
mode: Mode.autonomous,
script: b => {
const e = b.native;
const model = b.model;
const dataForSensor = e.dataForSensor;
dataForSensor.draggable = draggingId;
dataForSensor.drag = draggingId;
Fragment(() => {
var _a, _b, _c, _d;
const pointer = e.sensors.pointer;
if (pointer.dragSource === draggingId) {
if (pointer.dragStarted) {
if (pointer.draggingOver) {
(_a = model === null || model === void 0 ? void 0 : model.draggingOverAction) === null || _a === void 0 ? void 0 : _a.call(model, pointer);
if (pointer.dropped) {
(_b = model === null || model === void 0 ? void 0 : model.droppedAction) === null || _b === void 0 ? void 0 : _b.call(model, pointer);
}
}
else {
e.setAttribute("rx-dragging", "true");
(_c = model === null || model === void 0 ? void 0 : model.dragStartedAction) === null || _c === void 0 ? void 0 : _c.call(model, pointer);
}
if (pointer.dragFinished) {
(_d = model === null || model === void 0 ? void 0 : model.dragFinishedAction) === null || _d === void 0 ? void 0 : _d.call(model, pointer);
e.setAttribute("rx-dragging", "false");
}
}
}
});
},
})));
}