如何制作多个可移动元素

Question

我有用于创建可移动窗口（元素）的代码，并且在创建新窗口时调用此函数：function dragWindow(elmnt) {    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;    elmnt.querySelector(".window-caption").onmousedown = dragMouseDown;    function dragMouseDown(e) {        e.preventDefault();        pos3 = e.clientX;        pos4 = e.clientY;        document.onmouseup = closeDragElement;        document.onmousemove = elementDrag;    }    function elementDrag(e) {        e.preventDefault();        pos1 = pos3 - e.clientX;        pos2 = pos4 - e.clientY;        pos3 = e.clientX;        pos4 = e.clientY;        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";    }    function closeDragElement() {        // alert(elmnt.id);        document.onmouseup = null;        document.onmousemove = null;    }}https://i.stack.imgur.com/Rr3B6.gif 问题是：如果我创建一个新窗口，我无法移动他们之前创建的窗口。

Answer 1

我在每个窗口上再次调用该函数（在开发人员控制台中）；

因此，当我创建一个新窗口时，我应该为每个窗口再次调用dragWindow。

Answer 2

当您向上移动鼠标时，函数closeDragElement()被调用并且事件监听器document.onmousemove被覆盖为“null”。

注释掉函数中的最后一行closeDragElement()可能会解决这个问题：

function closeDragElement() {

        // alert(elmnt.id);

        document.onmouseup = null;

        // document.onmousemove = null;

}

编辑：添加一个变量mousedown来指示鼠标是否按下。

function dragWindow(elmnt) {

    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

    var mousedown = 0;

    elmnt.querySelector(".window-caption").onmousedown = dragMouseDown;

    function dragMouseDown(e) {

        e.preventDefault();

        mousedown++;

        pos3 = e.clientX;

        pos4 = e.clientY;

        document.onmouseup = closeDragElement;

        document.onmousemove = elementDrag;

    }

    function elementDrag(e) {

        e.preventDefault();

        if (mousedown === 0) {return;}

        pos1 = pos3 - e.clientX;

        pos2 = pos4 - e.clientY;

        pos3 = e.clientX;

        pos4 = e.clientY;

        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";

        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";

    }

    function closeDragElement() {

        // alert(elmnt.id);

        mousedown--;

        document.onmouseup = null;

        //document.onmousemove = null;

    }

}