通过单击和拖动移动 div

Question

我在一个网站上有一个 div，我目前正在处理它，我希望能够通过单击和拖动在页面上移动它。

我在网上找到了一个很酷的脚本，我可以根据自己的需要进行更改，但它完全弄乱了 div 的大小。 ——好像div突然无视了所有的父母。 我对 JS 还是很陌生，似乎找不到导致这个问题的原因。

我在这里重现了这个问题： JSFiddle – 我还在 HTML 部分中添加了注释，准确地解释了这种情况。

这是脚本：

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

object = document.querySelector('#moveMe');

document.body.appendChild(object);

object.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = [
        object.offsetLeft - e.clientX,
        object.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

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

Answer 1

问题是这里的这一行：
document.body.appendChild(object);

它将#myDiv div 移动到<body> ，因此它不再将#wrapper div 作为父级来设置宽度。

尝试删除该行，它将起作用。

现在，如果您想做一些更复杂的事情，您需要#myDiv移动到主体，以便它高于所有其他元素，您将不得不添加更多的 JS。

通过单击和拖动移动 div

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-06-03 19:03:20

通过单击和拖动移动 div

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-06-03 19:03:20

解决方案1
2 已采纳 2020-06-03 19:03:20