JavaScript如何通过单击和拖动动态移动Div

好吧，看起来应该很简单。我需要采取一个已经存在的div，并根据鼠标在窗口中的位置移动它。我到处都在搜索，这让我找到了做同样事情的过于复杂的方法，包括使用j-query。我需要严格使用javascript来完成我的工作

方法：

var mousePosition;
var div;

(function createDiv(){

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

    div.addEventListener('mousedown', handleKeyPressed, true);

    document.body.appendChild(div);


})();

function handleKeyPressed(event) {

    event.preventDefault();

    mousePosition = {

        x : event.clientX,
        y : event.clientY

    };

    div.style.left = mousePosition.x;
    div.style.top = mousePosition.y;

    //alert("whoa!");

}

---

我想你在找更像这样的东西

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

---

检查这是否比adeneo更平滑：

---

jquery更易于部署。我很惊讶你说你不想学

您可以将jquery文件保存在本地计算机中，这样就不需要internet 使用jquery功能

就我而言，我已将其保存在tools文件夹中。所以我不需要上网

对于上面回答的所有js多行js代码，您只需要一小行

 <script src="/common/tools/jquery-1.10.2.js"></script>
 <script src="/common/tools/jquery-ui.js"></script>

 <script>
   $(function() {
   $( "#mydiv_to_make_draggable" ).draggable();
   });
</script>

$（函数（）{
$（“#mydiv_to_make_draggable”）.draggable（）；
});

我刚刚对@adeneo的答案做了一个小小的修改，效果非常好。 如果所有内容都包含在函数中，并且每个事件都附加到div，则可以将其用作库的一部分

调用以下传递id的函数。如果div不存在，则创建该div

function drag_div(div_id){
var div;

div = document.getElementById(div_id);

if(div == null){
   div = document.createElement("div");
   div.id = div_id;
   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) {
    div.isDown = true;
    div.offset = [
        div.offsetLeft - e.clientX,
        div.offsetTop - e.clientY
    ];
}, true);

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

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

            x : event.clientX,
            y : event.clientY

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

---

你可以把这个用作图书馆。工作完美。我在github上找到了它，但它有时会被卡住，因为共享者在元素上放了“mouseup”。我把它改成文件，它解决了这个问题。这是固定版本

'use strict';

/**
 * Makes an element draggable.
 *
 * @param {HTMLElement} element - The element.
 */
function draggable(element) {
    var isMouseDown = false;

    // initial mouse X and Y for `mousedown`
    var mouseX;
    var mouseY;

    // element X and Y before and after move
    var elementX = 0;
    var elementY = 0;

    // mouse button down over the element
    element.addEventListener('mousedown', onMouseDown);

    /**
     * Listens to `mousedown` event.
     *
     * @param {Object} event - The event.
     */
    function onMouseDown(event) {
        mouseX = event.clientX;
        mouseY = event.clientY;
        isMouseDown = true;
    }

    // mouse button released
    document.addEventListener('mouseup', onMouseUp);

    /**
     * Listens to `mouseup` event.
     *
     * @param {Object} event - The event.
     */
    function onMouseUp(event) {
        isMouseDown = false;
        elementX = parseInt(element.style.left) || 0;
        elementY = parseInt(element.style.top) || 0;
    }

    // need to attach to the entire document
    // in order to take full width and height
    // this ensures the element keeps up with the mouse
    document.addEventListener('mousemove', onMouseMove);

    /**
     * Listens to `mousemove` event.
     *
     * @param {Object} event - The event.
     */
    function onMouseMove(event) {
        if (!isMouseDown) return;
        var deltaX = event.clientX - mouseX;
        var deltaY = event.clientY - mouseY;
        element.style.left = elementX + deltaX + 'px';
        element.style.top = elementY + deltaY + 'px';
    }
}

支持触摸输入 所有其他答案（包括已接受的答案）不适用于触摸输入触摸输入的事件与鼠标输入的事件不同。请参见MDN上的

下面的代码片段甚至可以用于触摸输入。我已经突出显示了所有需要添加以支持触摸设备的代码行。
这里的基本思想是类列表中包含

draggable

的每个元素都应该是draggable。当需要拖动大量元素时，此概念更容易遵循

请参阅故障页面和下面的演示

const d=document.getElementsByClassName（“可拖动”）；
for（设i=0；i//请注意，这个jQuery可以做到这一点，它对所有事情都很有用。添加jQuery UI，您就可以直接使用了。@adeneo jQuery是一个javascript库，我想学习javascript而不是jQuery，虽然我知道使用它是传统的，但我现在对学习它不感兴趣。只是研究纯javascript。不过有点紧张。这是bec因为它总是在鼠标指针的左上角，所以您必须计算元素相对于单击位置的偏移量，但这本身几乎是一个问题。@adeneo谢谢。：）虽然您可以简单地称我为白痴，因为我忘记将px添加到div.style.left=e.clientX；的末尾。但这对我帮助更大非常感谢。@StoneAgeCoder-是的，需要简单的JS单位。让我们看看我们是否能在一秒钟内修复抖动。这是迄今为止我见过的最好的解决方案。脚本很小，易于理解，结果比我在各种浏览器上看到的任何东西都好。我不得不发表评论和投票，如果只是为了再次找到它的话在将来，JQuery很容易使用，但是，任何人都可以使用。我也是一名程序员，喜欢从头开始编写代码。如果在代码中包含JQuery库，并且只使用其中的一个或两个函数，则会浪费大量空间。+1-现在有太多人跳到JQuery，而他们没有（1）首先理解或认识jQuery存在的原因，（2）评估当前环境对如此庞大的代码库的需求。更多的时候——使用纯ES6和ES5转换将导致未来验证的代码，更少的膨胀，更好地理解编程及其工作方式。而不是“仅仅让它工作”。我没有发现这比接受的答案更平滑。实际上有点紧张。我做错了什么吗？是的。接受的答案现在比我的更平滑。请使用接受的答案。感谢库的想法。但是当你快速移动鼠标时，div会结巴。mousemove事件应该添加到文档中。
'use strict';

/**
 * Makes an element draggable.
 *
 * @param {HTMLElement} element - The element.
 */
function draggable(element) {
    var isMouseDown = false;

    // initial mouse X and Y for `mousedown`
    var mouseX;
    var mouseY;

    // element X and Y before and after move
    var elementX = 0;
    var elementY = 0;

    // mouse button down over the element
    element.addEventListener('mousedown', onMouseDown);

    /**
     * Listens to `mousedown` event.
     *
     * @param {Object} event - The event.
     */
    function onMouseDown(event) {
        mouseX = event.clientX;
        mouseY = event.clientY;
        isMouseDown = true;
    }

    // mouse button released
    document.addEventListener('mouseup', onMouseUp);

    /**
     * Listens to `mouseup` event.
     *
     * @param {Object} event - The event.
     */
    function onMouseUp(event) {
        isMouseDown = false;
        elementX = parseInt(element.style.left) || 0;
        elementY = parseInt(element.style.top) || 0;
    }

    // need to attach to the entire document
    // in order to take full width and height
    // this ensures the element keeps up with the mouse
    document.addEventListener('mousemove', onMouseMove);

    /**
     * Listens to `mousemove` event.
     *
     * @param {Object} event - The event.
     */
    function onMouseMove(event) {
        if (!isMouseDown) return;
        var deltaX = event.clientX - mouseX;
        var deltaY = event.clientY - mouseY;
        element.style.left = elementX + deltaX + 'px';
        element.style.top = elementY + deltaY + 'px';
    }
}