[英]create draggable div on click make the parrent draggable not the new div
[英]How to make every new div draggable?
我想在以下方面寻求帮助。 基本上,我每次按下按钮时都会尝试创建一个新的<div>
。 然后,我想添加一个函数,使每个新的<div>
能够在我点击它时被拖动和移动,当我释放鼠标时它会下降(每个新的<div>
应该单独移动)。 我尝试了很多东西,但所有这些似乎都不能很好地工作。 我得到的结果是要么只有第一个<div>
移动,要么所有<div>
一起移动。 我没有添加我的移动功能,因为它没有很好地安排(很难理解,因为我尝试了很多东西)。 我也不允许使用 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>
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>
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.