Add option to make dialog draggable
LukeSavefrogs opened this issue · comments
Luca Salvarani commented
It would be very useful to have an option to make the dialog draggable
For example:
$.Zebra_Dialog("Test dialog", {
title: "Test Title",
custom_class: "test_draggable",
draggable: true
});
Demo
Something similar can be achieved:
/**
*
* @param {HTMLElement} draggable_element- The whole element you want to make draggable
* @param {HTMLElement} trigger_element- The element that is going to trigger the drag
*/
function makeElementDraggable(draggable_element, trigger_element) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if(trigger_element ){
initDrag(trigger_element)
trigger_element.style.cursor = "grab";
}
else if (document.getElementById(draggable_element.id + "-header")) {
// if present, the header is where you move the DIV from:
initDrag(document.getElementById(draggable_element.id + "-header"))
document.getElementById(draggable_element.id + "-header").style.cursor = "grab";
}
else if (draggable_element.querySelector(".ZebraDialog_Title")) {
// if it's a Zebra Dialog, init from the Title
initDrag(draggable_element.querySelector(".ZebraDialog_Title"))
draggable_element.querySelector(".ZebraDialog_Title").style.cursor = "grab";
} else {
// otherwise, move the DIV from anywhere inside the DIV:
initDrag(draggable_element)
}
// Save original position
draggable_element.dataset.beforeMovableTop = getComputedStyle(draggable_element).top;
draggable_element.dataset.beforeMovableLeft = getComputedStyle(draggable_element).left;
draggable_element.classList.add("isDraggable");
function initDrag(e) {
e.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
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:
draggable_element.style.top = (draggable_element.offsetTop - pos2) + "px";
draggable_element.style.left = (draggable_element.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
Then:
$.Zebra_Dialog("Test dialog", {
title: "Test Title",
custom_class: "test_draggable"
});
var element= document.querySelector(".ZebraDialog.test_draggable");
makeElementDraggable(element)
Or you could use this similar answer or even jQueryUI's draggable
Result
If you want i could try and make a PR when i have the time :)
Stefan Gabos commented
jQuery UI is out of the question - I wouldn't want to impose that on users; i'll definitely check the code you sent - thank you!