如何使用 jQuery 的拖放事件定义和检索自定义属性？答案

【问题标题】：How can I define and retrieve custom attributes with jQuery's drag and drop events?如何使用 jQuery 的拖放事件定义和检索自定义属性？
【发布时间】：2017-03-06 17:23:25
【问题描述】：

我想要做的是有一个图标列表，当每个图标被拖到可放置区域时，我定义的图标自定义数据会记录在某个位置的列表中。

我想为每个图标分配自定义数据，例如型号、名称、价格等。

类似...

<div class="draggable">
    <img src="icon1.png" width="20" data-price="80" data-name="xxxxxxxxx" data-model="xxxx">
</div>

也许我尝试使用 drop 事件发送数据而不是事后通过循环遍历每个 img 元素并使用 jQuery 提取属性来使事情复杂化？

【问题讨论】：

标签： jquery html drag-and-drop

【解决方案1】：

如果你想存储一些属性，你可以使用数据属性。

以下是使用数据属性拖放的示例实现。
1. 拖拽：获取数据属性并将其存储为 JSON 字符串。
2. 在放置时：获取 JSON 字符串并解析它。

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

function drag(ev) {
  ev.dataTransfer.setData("elem", ev.target.id);
  ev.dataTransfer.setData("data", JSON.stringify(ev.target.dataset));
}

function drop(ev) {
  ev.preventDefault();
  console.log(JSON.parse(ev.dataTransfer.getData("data")));
  var element = ev.dataTransfer.getData("elem");
  ev.target.appendChild(document.getElementById(element));

}

#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://www.w3schools.com/html/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" data-price="80" data-name="xxxxxxxxx" data-model="xxxx">

【讨论】：

感谢您提供完整的示例 :)

【解决方案2】：

您可以使用事件的目标对象来查找数据属性。

var list = [];
$('.draggable').on('dragstop', function(e, ui){
    list.push( $(e.target).data('name') );
});

【讨论】：