javascript拖放类/id问题
我有一个脚本将一个div拖到另一个div中:javascript拖放类/id问题,javascript,html,css,Javascript,Html,Css,我有一个脚本将一个div拖到另一个div中: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> .content { width: 300px; height: 300px; border:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.content {
width: 300px;
height: 300px;
border: 1px solid black;
}
#dragme {
height:50px;
width:50px;
background-color: blue;
}
</style>
</head>
<body>
<div class="content" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="dragme" draggable="true" ondragstart="drag(event)">Drag me!</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("dragged-id", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("dragged-id");
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
.内容{
宽度:300px;
高度:300px;
边框:1px纯黑;
}
#德拉格姆{
高度:50px;
宽度:50px;
背景颜色:蓝色;
}
拖我!
功能allowDrop(ev){
ev.preventDefault();
}
功能阻力(ev){
ev.dataTransfer.setData(“拖动id”,ev.target.id);
}
功能下降(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData(“拖动id”);
ev.target.appendChild(document.getElementById(数据));
}
这一切都很好,但是当我将“dragme”div从id改为class时,它就停止工作了。这对我来说毫无意义。请帮助?这就是它工作的原因:
document.getElementById(数据)
这就是它工作的原因:document.getElementById(数据)
您应该考虑不使用内联JS,并且使用分离来消除ID,而不是根据需要添加类和使用。您应该考虑不使用内联JS,并且使用CONNEST分隔符不删除ID,而是根据需要添加类和使用。
<body>
<div class="content" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dragme" draggable="true" ondragstart="drag(event)">Drag me!</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("dragged-id", ev.target.className);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("dragged-id");
ev.target.appendChild(document.getElementsByClassName(data)[0]);
}
</script>
</body>
.dragme {
height:50px;
width:50px;
background-color: blue;
}