Drag and Drop with .data()
Store drag source information with .data() to transfer context from the dragged element to the drop target.
jQuery
Advanced
5 min read
.data() in Drag and Drop
Example
$(".draggable").on("dragstart", function(e) {
$(this).data("dragging", true);
const id = $(this).data("id");
e.originalEvent.dataTransfer.setData("itemId", id);
});
$(".droppable").on("dragover", function(e) {
e.preventDefault();
$(this).addClass("drag-over");
}).on("drop", function(e) {
e.preventDefault();
const id = e.originalEvent.dataTransfer.getData("itemId");
$(this).removeClass("drag-over").append($("#item-" + id));
}); Pro Tip
Use dataTransfer for cross-element drag data; use .data() for element-specific state.