如何使每个新 div 可拖动？

Question

I'd like to ask for some help with the following please.我想在以下方面寻求帮助。 Basically, I'm trying to make a new <div> every time I press a button.基本上，我每次按下按钮时都会尝试创建一个新的<div> 。 Then, I want to add a function that would make every new <div> able to be dragged and moved when I click on it and when I release the mouse it drops (every new <div> should move separately).然后，我想添加一个函数，使每个新的<div>能够在我点击它时被拖动和移动，当我释放鼠标时它会下降（每个新的<div>应该单独移动）。 I have tried many things, but all of them seem not to be working well.我尝试了很多东西，但所有这些似乎都不能很好地工作。 The result I get is that either only the first <div> is moving or all <div> s move together.我得到的结果是要么只有第一个<div>移动，要么所有<div>一起移动。 I have not added my moving function because it is not well arranged (hard to understand because I tried many things).我没有添加我的移动功能，因为它没有很好地安排（很难理解，因为我尝试了很多东西）。 I'm also not allowed to use JQuery.我也不允许使用 JQuery。

Could you please advice me on what to do?你能告诉我该怎么做吗？ Thank you.谢谢。

<html>
<body>
    <button id="mybutton">Create a new moveabl div</button>
    <script>
        var create = document.createElement("div");
        create.id = "dragm2";
        document.body.appendChild(create);
        var count = 0;
        var text = document.createTextNode("mu yu ");
        document.getElementById("mybutton").addEventListener("click", function() {
            count++;
            var create = document.createElement("div");
            create.id = "dragme" + count;
            create.style.background = "green";
            create.style.height = "170px";
            create.style.width= "70px";
            create.appendChild(text);
            document.body.appendChild(create);
        });

        document.body.addEventListener("click", function(event) {
            console.log(event.target.nodeName);
            console.log(event.target.id);
            var movenow = event.target.id;
            if (movenow !== null && event.target.nodeName !== "BUTTON" ) {
                document.getElementById(movenow).addEventListener('mousedown', hold, false);
                document.body.addEventListener('mouseup', release, false);
                function hold() {
                    document.getElementById(movenow).addEventListener('mousemove', move, true);
                    document.body.addEventListener('mousemove', move, true);
                }
                // ==> On Realease Function <==
                function release() {
                    document.getElementById(movenow).removeEventListener('mousemove', move, true);
                    document.body.removeEventListener('mousemove', move, true);
                }
                function move(event) {
                    var epY = event.clientY;
                    var epX = event.clientX;

                    if (document.querySelectorAll("input[name='revertxy']:checked").length >= 1) {
                        epY = event.clientX;
                        epX = event.clientY;
                    }

                    event.target.style.position = 'absolute';
                    event.target.style.top = epY + 'px';
                    event.target.style.left = epX + 'px';
                }
            }
        });
    </script>
</body>
</html>

Answer 1

 const btn = document.querySelector('#btn'); btn.addEventListener("click", function() { const div = document.createElement("div"); div.className = 'draggable'; div.addEventListener('mousedown', mouseDown, false); document.body.appendChild(div); }); function mouseUp() { this.removeEventListener('mousemove', move, true); this.classList.remove('grabbing'); } function mouseDown(e) { this.addEventListener('mousemove', move, true); this.addEventListener('mouseup', mouseUp, true); this.classList.add('grabbing'); } function move(e) { this.style.position = 'absolute'; this.style.top = getMousePosition(e).client.y - (this.clientWidth / 2) + 'px'; this.style.left = getMousePosition(e).client.x - (this.clientHeight / 2) + 'px'; } function getMousePosition(evt) { var pageX = evt.pageX; var pageY = evt.pageY; if (pageX === undefined) { pageX = evt.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; pageY = evt.clientY + document.body.scrollTop + document.documentElement.scrollTop; } var rect = evt.target.getBoundingClientRect(); var offsetX = evt.clientX - rect.left; var offsetY = evt.clientY - rect.top; return { client: { x: evt.clientX, y: evt.clientY } }; }

 .draggable { width: 100px; height: 100px; margin: 5px; background: #333; }

 <button id="btn">Create a new moveabl div</button>

Answer 2

<head>
    <style>
    body { position: relative}
    div {
        width:100px; height: 100px;
        background:#f00;
        position: absolute;
    }
    </style>
</head>
<body>
        <button id = "ayoo">Create a new moveabl div</button>

<script>

 var count = 0
 var moving=false; 
 var mx,my;

document.getElementById('ayoo').addEventListener('click', function () {
        count++
        var mydiv = document.createElement("div")
        mydiv.id= "aya"+count
        document.body.appendChild(mydiv)

        mydiv.addEventListener('mousedown', function (e) {
            moving = true;
            this.style.backgroundColor="#00ff00";
        });
        mydiv.addEventListener('mousemove', function (e) {
            if(moving) {
                getmouse(e);
                this.style.top = my - 50;
                this.style.left = mx - 50;
            }

        });
        mydiv.addEventListener('mouseup', function (e) {
            moving = false;
            this.style.backgroundColor="#ff0000";
        });
});

function getmouse(e){
    if (e.pageX || e.pageY)
    { 
      mx = e.pageX;
      my = e.pageY;
    }
    else if (e.clientX || e.clientY)
    { 
      mx = e.clientX + document.body.scrollLeft;
      my = e.clientY + document.body.scrollTop;
    }  
}

</script>

</body>

如何使每个新 div 可拖动？

问题描述

2 个解决方案

解决方案1
2 2017-10-18 14:20:30

解决方案2
2 2017-10-18 14:25:16

如何使每个新 div 可拖动？

问题描述

2 个解决方案

解决方案1 2 2017-10-18 14:20:30

解决方案2 2 2017-10-18 14:25:16

解决方案1
2 2017-10-18 14:20:30

解决方案2
2 2017-10-18 14:25:16