我想拖动一个定义为数据属性的元素，我的问题是如何在此代码中解决它：

Question

我想拖动一个定义为数据属性的元素，我的问题是如何在此代码片段中解决它：

event.dataTransfer.setData ("dice", event.target.             );

Answer 1

使用dataset
(最好使用currentTarget)

<div data-dice="hello!" draggable="true">

event.currentTarget.dataset.dice    // "hello!"

示例：

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

EL_dropZone.addEventListener("drop", dropHandler);
EL_dropZone.addEventListener("dragover", dragoverHandler)
ELS_dice.forEach(el => el.addEventListener("dragstart", dragstartHandler));

function dragstartHandler(evt) {
  evt.dataTransfer.setData("application/my-dice", evt.currentTarget.dataset.dice);
}

function dragoverHandler(evt) {
  evt.preventDefault();
}

function dropHandler(evt) {
  const data = evt.dataTransfer.getData("application/my-dice");
  evt.currentTarget.textContent += data + " ";
}

#dropZone {
  padding: 10px;
  min-height: 1em;
  border: 1px dashed #0bf;
}

[data-dice] {
  display: inline-block;
  background: gold;
  cursor: grab;
}

<div data-dice="Hello" draggable="true">DICE 1</div>
<div data-dice="World!" draggable="true">DICE 2</div>

<div id="dropZone"></div>

我想拖动一个定义为数据属性的元素，我的问题是如何在此代码中解决它：

I want to drag an element defined as a data attribute and my question is how do I address it in this code:

javascript

dom-events