通過單擊和拖動移動 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