如何在拖拽代码中引用带data属性的元素并传入setData方法？

嘿，这问题其实挺常见的，我来一步步给你讲清楚怎么处理：

首先，假设你的HTML元素是这样的（比如带data-dice属性）：

<div draggable="true" data-dice="6">拖拽我</div>

接下来分两种常用的方式来获取这个data属性的值，然后传给setData：

方式1：使用dataset API（推荐，符合现代标准） #

dataset是HTML5提供的专门用来访问元素data-*属性的API，用法很直观：

element.addEventListener('dragstart', function(event) {
  // 直接通过dataset.属性名（去掉data-前缀）获取
  const diceValue = event.target.dataset.dice;
  event.dataTransfer.setData("dice", diceValue);
});

这里要注意：如果你的data属性是data-dice-number这种多词的，dataset里会转换成驼峰式，比如event.target.dataset.diceNumber。

方式2：使用getAttribute方法（兼容旧浏览器） #

如果需要兼容一些比较老的浏览器（比如IE10及以前），可以用getAttribute直接获取完整的属性名：

element.addEventListener('dragstart', function(event) {
  const diceValue = event.target.getAttribute('data-dice');
  event.dataTransfer.setData("dice", diceValue);
});

额外提醒 #

要确保event.target确实是你带data属性的那个元素！如果元素内部还有子元素，可能需要用event.currentTarget或者通过遍历找到正确的父元素（比如用closest('[data-dice]')）。举个例子：

element.addEventListener('dragstart', function(event) {
  // 找到最近的带data-dice属性的元素
  const targetElement = event.target.closest('[data-dice]');
  const diceValue = targetElement.dataset.dice;
  event.dataTransfer.setData("dice", diceValue);
});

这样就算点击的是子元素，也能正确拿到父元素的data属性值。

内容的提问来源于stack exchange，提问作者zehavi