Получить значение метки из константного массива по капле

Question

Я получаю имя изображения выпавшего элемента без расширения .jpg в ondrop () в var x .

В var y i want , чтобы получить соответствующее значение x из элемента [].

Перетащите .box002 в окно, где есть три класса .box со значением

Я планирую проверить состояние, чтобыvar y в необходимом

как его получить?

как получить значение var y?

var tempimages = [];


function rvalue() {
  const items = [  
      { label: '1:40', url: '1.png'  },
      { label: '2:20', url: '2.png'  },
      { label: '3:50', url: '3.png'  },
      { label: '4:45', url: '4.png'  },
      { label: '5:35', url: '5.png'  },
      { label: '6:10', url: '6.png'  },
      { label: '7:15', url: '7.png'  },
      { label: '8:10', url: '8.png'  },
      { label: '9:30', url: '9.png'  }
	   ]
	  
ptags = document.querySelectorAll('[name="values"]');
  



for (let index = 0; index < 3; index++) 
  {
      randomIndex = Math.floor(Math.random() * items.length),
      
      item = items[randomIndex];
      ptags[index].textContent = item.label;
      tempimages.push(item);
	
  }
	
  
}
	

function displayAllImages() {
  if (tempimages.length === 0) 
  {
    return;
  }
	item = tempimages.shift(),  
    image = document.getElementById('slide');
  image.src = item.url;
};

$(function() {
  
  rvalue();
  displayAllImages(); 
});	

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);
 alert(data);
 alert(el);
 var x=document.getElementById("slide").src.split("/").pop().split(".")[0];
 alert(x);
 var y

  
 //if(x==y)
  {
  el.parentNode.removeChild; 

  
  ev.currentTarget.style.backgroundColor = 'initial'; 

  var pParagraph = ev.currentTarget.firstElementChild;
  ev.currentTarget.removeChild(pParagraph);
  
  displayAllImages();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container2">
    
            <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 class="box002" draggable="true" ondragstart="drag(event)" id="2">

     <img src=""  draggable="true" id="slide" style="width:50px; height:50px; border-radius: 50%;" border="rounded"/>
        
</div>    

Answer 1

Есть много способов, но я предпочитаю использовать data-* в этом случае.
Если это так, вы можете назначить любой элемент своим элементам.

Во-первых, надеть randomIndex для ваших элементов, когда вы устанавливаете ptags[index].textContent = ~.

ptags[index].dataset.itemIndex = randomIndex;

Далее, сделайте то же самое с вашим элементом slide.

// in for loop...
tempimages.push({data:item, index: randomIndex});
// in displayAllImages method
image.src = item.data.url;
image.dataset.itemIndex = item.index;

Затем вы можете выбрать эти data-*в методе drop.

var x = document.getElementById("slide").dataset.itemIndex;
var y = ev.target.dataset.itemIndex;

Например