Javascript 如何使每一个新的div都可以拖动？_Javascript_Html

Javascript 如何使每一个新的div都可以拖动？

javascript html

Javascript 如何使每一个新的div都可以拖动？,javascript,html,Javascript,Html,我想在以下方面寻求帮助。基本上，每次按下按钮时，我都会尝试创建一个新的。然后，我想添加一个函数，当我点击并释放鼠标时，每个新的都可以拖动和移动（每个新的都应该单独移动）。我试过很多东西，但似乎都不太管用。我得到的结果是要么只有第一个移动，要么所有一起移动。我没有添加我的移动功能，因为它没有很好的安排（很难理解，因为我尝试了很多东西）。我也不允许使用JQuery 你能告诉我怎么做吗？多谢各位 <html> <body> <button id="mybutton

我想在以下方面寻求帮助。基本上，每次按下按钮时，我都会尝试创建一个新的

。然后，我想添加一个函数，当我点击并释放鼠标时，每个新的

都可以拖动和移动（每个新的

都应该单独移动）。我试过很多东西，但似乎都不太管用。我得到的结果是要么只有第一个

移动，要么所有

一起移动。我没有添加我的移动功能，因为它没有很好的安排（很难理解，因为我尝试了很多东西）。我也不允许使用JQuery

你能告诉我怎么做吗？多谢各位

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


创建一个新的moveabl div
var create=document.createElement（“div”）；
create.id=“dragm2”；
document.body.appendChild（创建）；
var计数=0；
var text=document.createTextNode（“mu yu”）；
document.getElementById（“mybutton”）.addEventListener（“单击”，函数（）{
计数++；
var create=document.createElement（“div”）；
create.id=“dragme”+计数；
create.style.background=“绿色”；
create.style.height=“170px”；
create.style.width=“70px”；
create.appendChild（文本）；
document.body.appendChild（创建）；
});
document.body.addEventListener（“单击”），函数（事件）{
日志（event.target.nodeName）；
日志（event.target.id）；
var movenow=event.target.id；
if（movenow！==null&&event.target.nodeName！==“按钮”）{
document.getElementById（movenow）.addEventListener（'mousedown'，hold，false）；
document.body.addEventListener（'mouseup'，release，false）；
函数保持（）{
document.getElementById（movenow.addEventListener（'mousemove'，move，true）；
document.body.addEventListener（'mousemove'，move，true）；
}
//==>在Realease功能上=1）{
epY=event.clientX；
epX=event.clientY；
}
event.target.style.position='absolute'；
event.target.style.top=epY+'px'；
event.target.style.left=epX+'px'；
}
}
});

const btn=document.querySelector（'#btn'）；
btn.addEventListener（“单击”，函数（）{
const div=document.createElement（“div”）；
div.className='draggable'；
div.addEventListener（'mousedown'，mousedown，false）；
文件.正文.附件（div）；
});
函数mouseUp（）{
this.removeEventListener（'mousemove'，move，true）；
this.classList.remove（'grabbing'）；
}
功能鼠标向下（e）{
this.addEventListener（'mousemove'，move，true）；
此.addEventListener（'mouseup'，mouseup，true）；
this.classList.add（'grabbing'）；
}
功能移动（e）{
this.style.position='绝对'；
this.style.top=getMousePosition（e.client.y-（this.clientWidth/2）+'px'；
this.style.left=getMousePosition（e.client.x-（this.clientHeight/2）+'px'；
}
函数getMousePosition（evt）{
var pageX=evt.pageX；
var pageY=evt.pageY；
如果（pageX==未定义）{
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；
返回{
客户：{
x:evt.clientX，
y:evt.clientY
}
};
}

.draggable{
宽度：100px；
高度：100px；
保证金：5px；
背景：#333；
}

创建一个新的moveabl div


正文{位置：相对}
div{
宽度：100px；高度：100px；
背景：#f00；
位置：绝对位置；
}
创建一个新的moveabl div
变量计数=0
var=false；
var-mx，我的；
document.getElementById（'ayoo'）。addEventListener（'click'，函数（）{
计数++
var mydiv=document.createElement（“div”）
mydiv.id=“aya”+计数
document.body.appendChild（mydiv）
mydiv.addEventListener（'mousedown'，函数（e）{
移动=真；
此.style.backgroundColor=“#00ff00”；
});
mydiv.addEventListener（'mousemove'，函数（e）{
如果（移动）{
小鼠（e）；
this.style.top=my-50；
this.style.left=mx-50；
}
});
mydiv.addEventListener（'mouseup'，函数（e）{
移动=假；
this.style.backgroundColor=“#ff0000”；
});
});
函数getmouse（e）{
如果（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；
}  
}

您需要使用可拖动属性：。您发布的代码是如何使一个div成为可拖动的？您能在jsFiddle中重新创建您尝试过的内容吗？您共享的代码不一定有帮助，因为我们无法重现该问题。如果下面的某个答案解决了您的问题，请接受它-请看对不起，您击败了我-非常相似的答案。注意clientX和Y并非在所有浏览器中都可用。还需要删除偏移等，才能在所有情况下获得真实的鼠标位置。@Matt_S Hi Matt_S感谢您的评论。我更新了答案。

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