Question

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

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

像...一样的东西。

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

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

Answer 1

如果您想存储少量属性，可以使用数据属性。

以下是具有数据属性的拖放示例实现 1.在拖动时：获取数据属性并将其存储为JSON字符串 2.在drop上：获取JSON String并解析它。

＆＃13;

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));

}

＆＃13;

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

＆＃13;

<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">

＆＃13;

Answer 2

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

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

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

2 个答案: