Add option to make dialog draggable

[LukeSavefrogs]

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 :)

[stefangabos]

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!

[stefangabos]

Better later than never! :) This has now been implemented, thanks for suggesting it - I used your code as starting point.