Question

我有以下HTML代码：

var dragItem = document.getElementsByClassName("dragElement");
var dropLoc = document.getElementById("dropLocation");

dragItem.ondragstart = function(evt) {
	evt.dataTransfer.setData('key', evt.target.id);
	console.log("its dragging....");
}

dropLoc.ondragover = function(evt) {
	console.log("its dragover....");
	evt.preventDefault();
}

dropLoc.ondrop = function(evt) {
	console.log("its dropped....");	
	var dropItem = evt.dataTransfer.getData('key');
	evt.preventDefault();
	var myElement = document.getElementsByClassName(dropItem);
	var myNewElement = document.createElement('img');
	myNewElement.src = myElement.src;
	dropLoc.appendChild(myNewElement);
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="styles.css" rel="stylesheet" type="text/css">
<title>Solitaire</title>
</head>
<body>
	<ul>
    	<li><img src="1.png" class="dragElement"></li>
    	<li><img src="2.png" class="dragElement"></li>
    	<li><img src="3.png" class="dragElement"></li>
    	<li><img src="4.png" class="dragElement"></li>
    	<li><img src="5.png" class="dragElement"></li>
    </ul>
    <div id="dropLocation"></div>
<script type="text/javascript" src="dragdropavatar.js"></script>
</body>
</html>

如何指定dragItem（javascript文件的第一行）我用鼠标选择拖动的img？使用getelementsbyclassname我得到所有元素，而不仅仅是我选择的元素，变量保持为空。

谢谢。

Javascript：如何使用getelementsbyclassname获取鼠标选择的元素

0 个答案: