如何在javascript中删除event.target

Question

I have a drag and drop code, ROUND BOX can be dragged and dropped to any of three RECTANGULAR box where image is equal to digit in round box,

I have used event.target.itemIndex to check the itemindex of target and dropped item.

I have stored stored the itemindex of dropped to x and target to y

on dropping roundbox to box with currusponding image i get the value of x but not getting value of y

HOW TO GET THE VALUE OF **ev.target.dataset.itemIndex;** ON DROP IN RVALUE()

 var randomIndex; var array2 = []; var item; var tempimages = []; var notesselected = []; var items = [ {label:'1',url:'https://via.placeholder.com/150x150.jpg?text=image1'}, {label:'2',url:'https://via.placeholder.com/150x150.jpg?text=image2'}, {label:'3',url:'https://via.placeholder.com/150x150.jpg?text=image3'}, {label:'4',url:'https://via.placeholder.com/150x150.jpg?text=image4'}, {label:'5',url:'https://via.placeholder.com/150x150.jpg?text=image5'}, {label:'6',url:'https://via.placeholder.com/150x150.jpg?text=image6'}, {label:'7',url:'https://via.placeholder.com/150x150.jpg?text=image7'}, {label:'8',url:'https://via.placeholder.com/150x150.jpg?text=image8'}, {label:'9',url:'https://via.placeholder.com/150x150.jpg?text=image9'}]; var notes = [ 'https://via.placeholder.com/75x75?text=1', 'https://via.placeholder.com/75x75?text=2', 'https://via.placeholder.com/75x75?text=3', 'https://via.placeholder.com/75x75?text=4', 'https://via.placeholder.com/75x75?text=5', 'https://via.placeholder.com/75x75?text=6', 'https://via.placeholder.com/75x75?text=7', 'https://via.placeholder.com/75x75?text=8', 'https://via.placeholder.com/75x75?text=9' ]; array2 = items.slice(); notes2 = notes.slice(); boxtags = document.getElementsByClassName("box"); function rvalue() { for (var index = 0; index < 3; index++) { randomIndex = Math.floor(Math.random() *array2.length) item = array2[randomIndex]; tempimages.push({data: item,index: randomIndex }); notesselected.push({data: notes2[randomIndex],index: randomIndex}); boxtags[index].style.backgroundImage = 'url(' + item.url + ')'; array2.splice(randomIndex, 1); notes2.splice(randomIndex, 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"); var el = document.getElementById(data); var x=document.getElementById("slide").dataset.itemIndex; if(typeof tempimages[randomIndex] !== 'undefined') { var y = tempimages[randomIndex].index; } console.log(x); console.log(y); if(x==y) { ev.currentTarget.style.backgroundColor = 'initial'; ev.currentTarget.style.backgroundImage = 'initial'; ev.currentTarget.style.border = 'initial'; var pParagraph = ev.currentTarget.firstElementChild; pParagraph.style.visibility = "hidden"; item = this.item; var arrayvalue = item.dataindex; tempimages.splice(arrayvalue, 1); if (tempimages.length == 0) { rvalue(); } displayAllImages(); } } function displayAllImages() { if (tempimages.length == 0) { rvalue(); } var arr2=notesselected; item = arr2.shift(); image = document.getElementById('slide'); image.src =item.data; image.dataset.itemIndex = item.index; } $(function() { displayAllImages(); }); 

 .box { width: calc(33.3% - 4px); display: inline-block; border-radius: 5px; border: 2px solid #333; margin: -2px; border-radius: 0%; } .box { height: 15vh; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background-size: contain; } .box002 { position: absolute; top: 25.3vh; left: 40.98vw; cursor: pointer; } .box002 img { width: 14.0vw; height: 23.0vh; border-radius: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container2"> <div class="containerr"> <div class="pic" id="content"> <div id="container"> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12"> <p name="values"></p> </div> </div> </div> </div> </div> <div class="box002" draggable="true" ondragstart="drag(event)" id="2"> <img src="" draggable="true" id="slide" border="rounded" /> </div> 

Answer 1

change var y = ev.target.dataset.itemIndex; to

var y = '';
if(typeof tempimages[x] !== 'undefined') {
     y = tempimages[x].index;
}

 var randomIndex; var array2 = []; var item; var tempimages = []; var notesselected = []; var items = [{ label: '1', url: 'https://via.placeholder.com/150x150.jpg?text=image1' }, { label: '2', url: 'https://via.placeholder.com/150x150.jpg?text=image2' }, { label: '3', url: 'https://via.placeholder.com/150x150.jpg?text=image3' }, { label: '4', url: 'https://via.placeholder.com/150x150.jpg?text=image4' }, { label: '5', url: 'https://via.placeholder.com/150x150.jpg?text=image5' }, { label: '6', url: 'https://via.placeholder.com/150x150.jpg?text=image6' }, { label: '7', url: 'https://via.placeholder.com/150x150.jpg?text=image7' }, { label: '8', url: 'https://via.placeholder.com/150x150.jpg?text=image8' }, { label: '9', url: 'https://via.placeholder.com/150x150.jpg?text=image9' } ]; var notes = [ 'https://via.placeholder.com/75x75?text=1', 'https://via.placeholder.com/75x75?text=2', 'https://via.placeholder.com/75x75?text=3', 'https://via.placeholder.com/75x75?text=4', 'https://via.placeholder.com/75x75?text=5', 'https://via.placeholder.com/75x75?text=6', 'https://via.placeholder.com/75x75?text=7', 'https://via.placeholder.com/75x75?text=8', 'https://via.placeholder.com/75x75?text=9' ]; array2 = items.slice(); notes2 = notes.slice(); boxtags = document.getElementsByClassName("box"); function rvalue() { for (var index = 0; index < 3; index++) { randomIndex = Math.floor(Math.random() * array2.length) item = array2[randomIndex]; tempimages.push({ data: item, index: randomIndex }); notesselected.push({ data: notes2[randomIndex], index: randomIndex }); boxtags[index].style.backgroundImage = 'url(' + item.url + ')'; array2.splice(randomIndex, 1); notes2.splice(randomIndex, 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"); var el = document.getElementById(data); var x = document.getElementById("slide").dataset.itemIndex; var y = ''; console.log('typeof tempimages[x]'); console.log(typeof tempimages[x]); if (typeof tempimages[x] !== 'undefined') { y = tempimages[x].index; } console.log(x); console.log(y); if (x == y) { console.log('right place'); ev.currentTarget.style.backgroundColor = 'initial'; ev.currentTarget.style.backgroundImage = 'initial'; ev.currentTarget.style.border = 'initial'; var pParagraph = ev.currentTarget.firstElementChild; pParagraph.style.visibility = "hidden"; item = this.item; var arrayvalue = item.dataindex; tempimages.splice(arrayvalue, 1); if (tempimages.length == 0) { rvalue(); } displayAllImages(); } else { console.log('wrong place'); } //} } function displayAllImages() { if (tempimages.length == 0) { rvalue(); } var arr2 = notesselected; item = arr2.shift(); image = document.getElementById('slide'); image.src = item.data; image.dataset.itemIndex = item.index; } $(function () { displayAllImages(); }); 

 .box { width: calc(33.3% - 4px); display: inline-block; border-radius: 5px; border: 2px solid #333; margin: -2px; border-radius: 0%; } .box { height: 15vh; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background-size: contain; } .box002 { position: absolute; top: 25.3vh; left: 40.98vw; cursor: pointer; } .box002 img { width: 14.0vw; height: 23.0vh; border-radius: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container2"> <div class="containerr"> <div class="pic" id="content"> <div id="container"> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12"> <p name="values"></p> </div> </div> </div> </div> </div> <div class="box002" draggable="true" ondragstart="drag(event)" id="2"> <img src="" draggable="true" id="slide" border="rounded" /> </div>