Question

我正在使用html拖动带id ="drag1"的图片，将其拖放到id="div1"的分区，但它不起作用。我已经有一个有4个图像的部门，它的源代码正在改变并且它正在工作。你能帮我解决这个问题吗？

＆＃13;

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}


setTimeout(fun,15000);
function fun(){ document.getElementById("image1").src="bed1.jpg"
}

setTimeout(fun1,30000);
function fun1(){ document.getElementById("image2").src="bed1.jpg";
}

setTimeout(fun2,6000);
function fun2(){ document.getElementById("image3").src="bed1.jpg";
}

setTimeout(fun3,60000);
function fun3(){ document.getElementById("image4").src="bed1.jpg";
}

setTimeout(fun4,45000);
function fun4(){ document.getElementById("image5").src="bed1.jpg";
}

＆＃13;

#div1 {
    height: 300px;
    padding: 10px;
    border: 1px solid #aaaaaa; background-color:white;
}
body {
background: lavender;
}
img {
height: 250px;
width: 230px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Drag Image</title>
</head>
<body>

<h1 style="margin-left:100px; margin-top:70px; color:firebrick;font-family:arial; font-size:50px">Medical Care</h1><br />
<img src="gethelp.png" height=100px width=130px style="margin-left:130px;" />

<div style="background-color:white;margin-top:140px;padding:50px;">
<img id="image1" src="bed.jpg">
<img id="image2" src="bed.jpg">
<img id="image3" src="bed.jpg">
<img id="image4" src="bed.jpg">
<img id="image5" src="bed.jpg">
</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="bed.jpg" draggable="true" ondragstart="drag(event)">
</body>
</html>

＆＃13;

请帮我弄清楚为什么拖放不能使用此代码。它是单独工作但不在此代码中。

拖放不能在html中工作

0 个答案: