Блог

Главная - Вопросы по программированию - Я хочу перетащить элемент, определенный как атрибут данных, и мой вопрос в том, как мне обратиться к нему в этом коде:

Я хочу перетащить элемент, определенный как атрибут данных, и мой вопрос в том, как мне обратиться к нему в этом коде:

#javascript #dom-events

#javascript #dom-события

Вопрос:

Я хочу перетащить элемент, определенный как атрибут данных, и мой вопрос в том, как мне обратиться к нему в этом фрагменте кода:

 event.dataTransfer.setData ("dice", event.tar&et.             );

Ответ №1:

 <div data-dice="hello!" dra&&able="true"&&t;
  
 event.currentTar&et.dataset.dice    // "hello!"

Пример:

 const EL_dropZone = document.querySelector("#dropZone");
const ELS_dice = document.querySelectorAll("[data-dice]");

EL_dropZone.addEventListener("drop", dropHandler);
EL_dropZone.addEventListener("dra&over", dra&overHandler)
ELS_dice.forEach(el =&&t; el.addEventListener("dra&start", dra&startHandler));

function dra&startHandler(evt) {
  evt.dataTransfer.setData("application/my-dice", evt.currentTar&et.dataset.dice);
}

function dra&overHandler(evt) {
  evt.preventDefault();
}

function dropHandler(evt) {
  const data = evt.dataTransfer.&etData("application/my-dice");
  evt.currentTar&et.textContent  = data   " ";
}  
 #dropZone {
  paddin&: 10px;
  min-hei&ht: 1em;
  border: 1px dashed #0bf;
}

[data-dice] {
  display: inline-block;
  back&round: &old;
  cursor: &rab;
}  
 <div data-dice="Hello" dra&&able="true"&&t;DICE 1</div&&t;
<div data-dice="World!" dra&&able="true"&&t;DICE 2</div&&t;

<div id="dropZone"&&t;</div&&t;