複数のドラッグアンドドロップが機能しない

これまでのところ、1つのイメージから開始し、それをボックスにドラッグしてドロップしても問題ありません。しかし、私は、より多くの画像を生成するボタンを持っています。元の画像と同じものにドロップすると、ドロップされません。複数のドラッグアンドドロップが機能しない

マイコード：

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>

任意の助けいただければ幸いです！私が望むだけ多くの新しい画像を作って、それらをボックスにドロップできるようにしたいと思います！

出典

2017-07-14 skyleguy

...動作しているようです「newImg.ondragstart =ドラッグ;」関数の名前はこのようにはなりません 'newImg.ondragstart = "drag（event）";

このような新しいコードを見て：

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
    <title>Drag and Drop Test</title> 
 
    <style> 
 
    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;} 
 
    </style> 
 
    <script> 
 

 
    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; 
 
    newImg.style = "width: 50px; height: 50px; padding-right: 4px;" 
 
    var theDiv = document.getElementById('imgHolder'); 
 
    theDiv.appendChild(newImg); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <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> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-07-14 21:53:27

問題は、https://www.w3schools.com/jsref/event_ondragstart.aspによるnewImg.ondragstart = "drag(event)";によると、形式はnewImg.ondragstart = function(){drag(event)};である必要があります。このように機能を指し示すする必要があなたのノード上のongragstart機能

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
    <title>Drag and Drop Test</title> 
 
    <style> 
 
    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;} 
 
    </style> 
 
    <script> 
 

 
    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 = function(){drag(event)}; 
 
    //newImg.ondragstart = "drag(event)"; 
 
    newImg.style = "width: 50px; height: 50px; padding-right: 4px;" 
 
    var theDiv = document.getElementById('imgHolder'); 
 
    theDiv.appendChild(newImg); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <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> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-07-14 21:51:55 grateful

複数のドラッグアンドドロップが機能しない

答えて

関連する問題