逐一显示图像阵列中的每个图像以进行拖放

Question

我有一些代码尝试根据从tempimages[]中img到src的{​​{1}}到id=slide box002显示临时图像arrayVariable至ptag[i]。

我想首先在类tempimages[0]的{​​{1}} img上显示src，在删除该图像后，它会被功能box002删除，之后Drop(ev)应该显示tempimages[i]中的img src，以便同样删除。

如何显示从图像阵列box002到类框tempimages img的图像？

我已经使用函数src将图像分配给displayAllImages() img src，但是它无法显示图像。

id=slide可以拖放到任何框中。

我想在每次拖放后从框的box002到tempimages[] img逐一显示每个图像。如何更改代码以实现此属性？

src

var tempimages = [];
		function rvalue()
{
var array = [];

var arrayVariable = ['1', '2', '3', '4', '5','6', '7', '8', '9', '10','11', '12', '13', '14', '15','16', '17', '18', '19', '20'];
var ArrayOfImages = ['1.jpg', '2.jpg', '3.jpg', '4.jpg' ,'5.jpg','6.jpg', '7.jpg', '8.jpg', '9.jpg' ,'10.jpg','1.jpg', '2.jpg', '3.jpg', '4.jpg' ,'5.jpg','6.jpg', '7.jpg', '8.jpg', '9.jpg' ,'10.jpg']; //your assumed 
  
arrayLength = arrayVariable.length;

ptags = document.getElementsByName("values");
for (i = 0; i < ptags.length; i++)
 {
ptags[i].textContent = arrayVariable[Math.floor(Math.random() * arrayLength)];
	
array.push(ptags[i].textContent);
tempimages.push(`${ptags[i].textContent}.jpg`); 
}
		
  console.log(array);
  console.log(tempimages); 
  console.log(slide); 
		 }

	
	
	
function displayAllImages() 
{
    var i = 0,
    len = tempimages.length;        
    for (; i < tempimages.length; i++)
	 { 
        var img = new Image();
        img.src = tempimages[i];
        img.style.width = '100px';
        img.style.height = '100px';
        
     	document.getElementById('slide').appendChild(img);

		if(i==1)
	    {
		break;
		return i;
		}
		else{i=i;}	
    }
};

$(function(){displayAllImages();}  );	
	
		 
</script>

<script>

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");
  var el = document.getElementById(data);

	var d=el.parentNode.removeChild; // deleting drag item
	ev.target.style.backgroundColor = 'initial'; //[value indicate which box elemenet] bgcoclor none
  
  /* Added */
  var pParagraph = ev.target.firstElementChild;
  console.log(pParagraph);
  ev.target.removeChild(pParagraph);
  
  alert(el);
  console.log(el.parentNode.removeChild);
   
  var ivalue= new displayAllImages();
  var d=ivalue.i;
  console.log(d); 
}

#container {
    margin-top:-2%;
    white-space:nowrap;
    text-align:center;
    margin-left:20%;
    margin-right:30%;
}

.box {
    background-color: coral;
    width: 60px;
    height:60px;
    margin-top:50px;
    display:inline-block;
    border-radius:5px;
    border:2px solid #333;
    border-color: #e6e600;
    border-radius: 10%;
    background-color:  #ffcc00;
}
.box002 {
            float: left;
            width: 50px;
            height: 50px;
            float: left;
			margin-left:30%;
			padding-top:2%;
			background-color:#ffff00 2px;
			border:2px solid #000066;
        }	
.text {
    padding: 20px;
    margin:7 px;
    margin-top:10px;
    color:white;
    font-weight:bold;
    text-align:center;
}
    #container {
    white-space:nowrap;
    text-align:center;
	margin-left:20%;
    margin-right:30%;
}

.text {
    padding: 20px;
    margin:7 px;
    margin-top:10px;
    color:white;
    font-weight:bold;
    text-align:center;
}