Как передать идентификатор отбрасываемого элемента на целевой элемент? - PullRequest
Новая
       81

Как передать идентификатор отбрасываемого элемента на целевой элемент?

0 голосов
/ 14 июля 2020

Я кодирую действие, в котором пользователь перетаскивает картинки (фрагменты музыки c) на цель. Затем я хочу выполнить код, зависящий от того, какое изображение перетаскивается на цель.

В моем примере кода здесь у меня есть два изображения и одна цель. Чтобы я мог выполнять код, зависящий от того, какой элемент перетаскивается на цель, мне нужно связать идентификатор перетаскиваемого элемента с целью.

Я знаю, как вернуть идентификатор перетаскиваемого элемента, я просто не знаю, как связать его с целевым элементом.

Заранее спасибо, если кто-нибудь может помочь: -) 

function allowDrop(ev)  {
    ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}
    
/* this is the DROP function*/    

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  alert(data);

}
    
    
/* plays the snippets when they are clicked clicked*/    
    
function playAudio(url) {
  new Audio(url).play();
}
#empties  { 
width:410px;
height:700px;
margin-left:10px;
margin-top:0px;
position:absolute;
top:10px;
left: 0px; 
border:1px solid blue;
}


.box001 {
width:410px;
height:41px;
margin:0px;
padding:0px;
border:1px solid blue;
}
 
 
/* snippets  */
 
#music  {
width:410px;
height:700px;
margin-left:00px;
margin-top:0px;
position:absolute;
top:10px;
left:450px;
border: 1px solid red;

 }


.box002 {


width:410px;
height:41px;
margin:0px;
padding:0px;
border:1px solid red;

 }
image
...