我想在。on(dragstart)事件和。on(drop)事件之间传递信息(在本例中是数据)。当我在Chrome中运行以下代码时，我得到Uncaught TypeError: Cannot read property 'test' of undefined:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="jquery.min.js"></script>
<style>
body {
background-color: DimGrey;
}
.a1 {
display: inline-block;
position: absolute;
background-color: white;
width: 100px;
height: 100px;
}
.in, .out {
display: inline-block;
position: absolute;
left: 40%;
top: 40%;
}
</style>
</head>
<body>
<div id="0" class="a1" style="left:30%;top:40%">
<div id='y' tabindex="-1" class="out" draggable="true">⊙</div>
</div>
<div id="1" class="a1" style="left:60%;top:40%">
<div id='x' class="in">⊚</div>
</div>
<script>
$(".out").on("dragstart", {test:"a"}, function(ev){
});
$(".in").on("dragover", function(ev) {
ev.preventDefault();
}).on("drop", function(ev) {
ev.target.append(ev.data.test);
});
</script>
</body>
</html>
从我的研究，似乎数据只在同一事件在jQuery中工作，但在香草JavaScript拖放事件传输数据。正确的做法是什么?
考虑以下内容:
// Reference: https://developer.mozilla.org/en-US/docs/Web/API/DragEvent
$(function() {
var dragged;
$(".a1").on("dragstart", ".out", {
test: "a"
}, function(ev) {
console.log("DragStart", ev.data.test);
dragged = ev.target;
$(dragged).data(ev.data);
});
$(".in").on("dragover", function(ev) {
ev.preventDefault();
}).on("drop", function(ev) {
ev.target.append($(dragged).data("test"));
});
});body {
background-color: DimGrey;
}
.a1 {
display: inline-block;
position: absolute;
background-color: white;
width: 100px;
height: 100px;
}
.in,
.out {
display: inline-block;
position: absolute;
left: 40%;
top: 40%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="0" class="a1" style="left:30%;top:40%">
<div id='y' tabindex="-1" class="out" draggable="true">⊙</div>
</div>
<div id="1" class="a1" style="left:60%;top:40%">
<div id='x' class="in">⊚</div>
</div>当你查看[.on()][1]的文档时，你会看到:
.on( events [, selector ] [, data ], handler )
当一个事件被触发时传递给event.data处理程序的数据，被指定用于事件回调，而不是用于其他事件。
我们可以使用.data()将数据附加到元素上。通过这种方式，您可以传入对象，将其附加到元素上，当它被删除时，您可以收集数据。[1]: https://api.jquery.com/on/