make draggable elements without jquery

Question

I want a simple way to drag elements around on a webpage, and allow people to keep it customized when they revisit, in the cache. I don't care if it requires a bit of flash, but my server will not load jquery for some reason, so no jquery.

Possible duplicate of https://stackoverflow.com/questions/9334084/moveable-draggable-div — executable, Jul 12 '18 at 10:22

score 0 · Accepted Answer · answered Jul 12 '18 at 10:42

var mousePosition;
var offset = [0,0];
var div;
var isDown = false;

div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "blue";

document.body.appendChild(div);

div.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = [
        div.offsetLeft - e.clientX,
        div.offsetTop - e.clientY
    ];
}, true);

document.addEventListener('mouseup', function() {
    isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (isDown) {
        mousePosition = {

            x : event.clientX,
            y : event.clientY

        };
        div.style.left = (mousePosition.x + offset[0]) + 'px';
        div.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);

Thank Executable

for the answer

make draggable elements without jquery

1 Answers1