我想拖动一个定义为数据属性的元素，我的问题是如何在以下代码中处理它:

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>