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

我想要做的是有一个图标列表，当每个图标被拖入可投放区域时，我定义的图标自定义数据被记录在某个列表的某处。如何使用jQuery的拖放事件定义和检索自定义属性？

我想在试图通过复杂的东西指定自定义数据，每个图标如型号，名称，价格等

喜欢的东西...

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

也许我使用drop事件发送数据，而不是仅仅通过遍历每个img元素并通过jQuery拉动属性来找到它？

来源

2017-03-06 Coffee bean

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

下面是拖放数据属性的示例实现。
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">

来源

2017-03-06 18:20:29

感谢完整的例子:) –

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

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

来源

2017-03-06 17:34:21 Nick

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

回答

相关问题