67 lines
1.7 KiB
JavaScript
67 lines
1.7 KiB
JavaScript
const moveModal = (elmnt) => {
|
|
console.log(elmnt);
|
|
var pos1 = 0,
|
|
pos2 = 0,
|
|
pos3 = 0,
|
|
pos4 = 0;
|
|
document.body.addEventListener("mousedown", dragMouseDown, {
|
|
passive: false,
|
|
});
|
|
|
|
function dragMouseDown(e) {
|
|
console.log("dragMouseDown", e);
|
|
e = e || window.event;
|
|
e.preventDefault();
|
|
// get the mouse cursor position at startup:
|
|
pos3 = e.clientX;
|
|
pos4 = e.clientY;
|
|
document.body.addEventListener("mouseup", closeDragElement, {
|
|
passive: false,
|
|
});
|
|
// call a function whenever the cursor moves:
|
|
document.body.addEventListener("mousemove", elementDrag, {
|
|
passive: false,
|
|
});
|
|
}
|
|
|
|
function elementDrag(e) {
|
|
e = e || window.event;
|
|
e.preventDefault();
|
|
// calculate the new cursor position:
|
|
pos1 = pos3 - e.clientX;
|
|
pos2 = pos4 - e.clientY;
|
|
pos3 = e.clientX;
|
|
pos4 = e.clientY;
|
|
// set the element's new position:
|
|
elmnt.style.top = elmnt.offsetTop - pos2 + "px";
|
|
elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
|
|
}
|
|
|
|
function closeDragElement() {
|
|
// stop moving when mouse button is released:
|
|
document.body.removeEventListener("mouseup", closeDragElement);
|
|
document.body.removeEventListener("mousemove", elementDrag);
|
|
}
|
|
};
|
|
|
|
export const draggable = {
|
|
install(app) {
|
|
app.directive("draggable", {
|
|
mounted: (el, binding, vnode, prevVnode) => {
|
|
console.log("draggable", $(`#${el.id}`).draggable);
|
|
if (binding.value) {
|
|
if ($(`#${el.id}`).draggable) {
|
|
$(`#${el.id}`).draggable({
|
|
cursor: "move",
|
|
scroll: true,
|
|
container: ".app-container",
|
|
});
|
|
} else {
|
|
moveModal(el);
|
|
}
|
|
}
|
|
},
|
|
});
|
|
},
|
|
};
|