在没有 jquery 的情况下制作可拖动元素

Posted 2023-05-08

【中文标题】在没有 jquery 的情况下制作可拖动元素

【英文标题】：make draggable elements without jquery

【发布时间】：2018-12-20 12:50:08

【问题描述】：

我想要一种简单的方法来在网页上拖动元素，并允许人们在重新访问时在缓存中保持自定义。 我不在乎它是否需要一点闪存，但我的服务器由于某种原因不会加载 jquery，所以没有 jquery。

【问题讨论】：

***.com/questions/9334084/moveable-draggable-div的可能重复

它是...标记它已关闭。

【参考方案1】：

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

感谢Executable

为了答案