代码之家 › 专栏 › 技术社区 › Can74

为什么我的代码不起作用?

appendchild draggable javascript

Can74 · 技术社区 · 6 年前

我有一个按钮。你可以 appendChild 一个可拖动的div,但它不工作。谁能帮帮我吗?

JSFIDLE(JSIDLE): https://jsfiddle.net/no2o9vo4/1/

var diva = document.getElementById("div-a");

function adddiv() {
	var newdiv = document.createElement("div");
	newdiv.className = "babydiv";
	
	diva.appendChild(newdiv);
}


function divMove(e){
  	this.style.top = e.clientY + 'px';
  	this.style.left = e.clientX  + 'px';
}

* {
	padding: 0;
	margin: 0;
}

#div-a {
	position: relative;
	width: 300px;
	height: 300px;
	background-color: red;
}

.babydiv {
	transform: translate(-50%, -50%);
	position: relative;
	width: 300px;
	height: 200px;
	background-color: blue;
}

<div id="div-a">
	<div class="babydiv" onmousedown="divMove();">
			
			
	</div>
</div>
		
<a onclick="adddiv()">add div</a>

1 回复 | 直到 6 年前

Christer 6 年前

难道不使用事件的坐标只表示事件(mousedown)发生时的坐标吗?意思是你不能移动它。

我想你必须有一些东西来选择目标 mousedown ,然后为添加事件侦听器 mousemove ,在鼠标移动时更改目标的坐标,并在 mouseup 已启动。

我在这里快速演示了我的观点: https://jsfiddle.net/ymqycx0e/