到目前爲止,我從一個圖像開始,我可以將它拖到一個盒子並放下它,它工作正常。但是我有一個可以產生更多圖像的按鈕,當我將它們放在與原始作品相同的東西上時,它們不會掉落在那裏。多拖和不工作
我的代碼:
var myCount = 1;
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));
}
function addImage() {
var newImg = document.createElement("img");
newImg.src = "apple.png";
myCount += 1;
var myString = "drag" + myCount.toString();
newImg.id = myString;
newImg.draggable = "true";
newImg.ondragstart = "drag(event)";
newImg.style = "width: 50px; height: 50px; padding-right: 4px;"
var theDiv = document.getElementById('imgHolder');
theDiv.appendChild(newImg);
}
body {background-color: #ddd; font-family: arial, verdana, sans-serif;}
#drop1 {width: 200px; height: 200px; border: 1px solid black; background-color: white;}
#drag1 {width: 50px; height: 50px;}
.drag {width: 50px; height: 50px;}
<div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p> Drag the image below into the box above:</p>
<div style="width: 50px; height: 50px; border:2px solid black; background-color: cyan; text-align: center;" onclick="addImage()">click me!</div>
<div style="border: 2px solid black; height: 200px; width: 500px;" id="imgHolder">
<img id="drag1" src="apple.png" draggable="true" ondragstart="drag(event)"/>
</div>
任何幫助,將不勝感激!我希望能夠製作儘可能多的新圖像,並能夠將它們放入盒子中!