拖放未保留在dataTransfer对象中的数据
拖放未保留在dataTransfer对象中的数据
提问于 2022-01-18 19:22:28
我试图实现一个简单的拖放，但由于某种原因，我存储在dataTransfer对象中的数据没有被保留。这是我的代码：
function drag(ev) {
var checker_id = ev.target.id;
var checker_slot = ev.target.getAttribute('data-slot');
console.log(`Starting drag with ${checker_id} from slot ${checker_slot}`);
ev.originalEvent.dataTransfer.setData("checker-id", ev.target.id);
ev.originalEvent.dataTransfer.setData("checker-slot", ev.target.getAttribute('data-slot'));
var stored_id = ev.originalEvent.dataTransfer.getData("checker-id");
var stored_slot = ev.originalEvent.dataTransfer.getData("checker-slot");
console.log(`Just stored checker ${stored_id} from slot ${stored_slot}`);
}
function drag_over(ev) {
console.log(`Drag_over event data: ${ev.originalEvent.dataTransfer.types}`);
var checker_id = ev.originalEvent.dataTransfer.getData("checker-id");
var checker_slot = ev.originalEvent.dataTransfer.getData("checker-slot");
console.log(`Drag_over with checker ${checker_id} from slot ${checker_slot}`);
}
$("#checker-1").on('dragstart', drag);
$("#slot-2").on('dragover', drag_over);.slot {
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid black;
}
.checker {
width: 50px;
height: 50px;
background: blue;
}<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<div class="slot" id="slot-1">
<div class="checker" id="checker-1" data-slot="slot-1" draggable="true">
</div>
<div class="slot" id="slot-2"></div>
我希望控制台的输出如下：
从检查器开始拖动-1从插槽槽-1
- 刚刚存储检查器检查器-1从槽事件数据: checker-id，checker-slot
- Drag_over带检查器检查器-1从插槽槽-1
相反，最后一个log语句是：
- Drag_over从插槽
带校验器
出于某种原因，它保留了我存储在dataTransfer对象中的键，而不是值。我不知道我做错了什么。
回答 1
Stack Overflow用户
发布于 2022-01-19 00:17:19
我注意到你错过了一个DIV的贴身标记。这一修正后的代码似乎有效：
function drag(ev) {
var checker_id = ev.target.id;
var checker_slot = ev.target.getAttribute('data-slot');
console.log(`Starting drag with ${checker_id} from slot ${checker_slot}`);
ev.originalEvent.dataTransfer.setData("checker-id", ev.target.id);
ev.originalEvent.dataTransfer.setData("checker-slot", ev.target.getAttribute('data-slot'));
var stored_id = ev.originalEvent.dataTransfer.getData("checker-id");
var stored_slot = ev.originalEvent.dataTransfer.getData("checker-slot");
console.log(`Just stored checker ${stored_id} from slot ${stored_slot}`);
}
function drag_over(ev) {
console.log(`Drag_over event data: ${ev.originalEvent.dataTransfer.types}`);
var checker_id = ev.originalEvent.dataTransfer.getData("checker-id");
var checker_slot = ev.originalEvent.dataTransfer.getData("checker-slot");
console.log(`Drag_over with checker ${checker_id} from slot ${checker_slot}`);
}
$("#checker-1").on('dragstart', drag);
$("#slot-2").on('dragover', drag_over);.slot {
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid black;
}
.checker {
width: 50px;
height: 50px;
background: blue;
}<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<div class="slot" id="slot-1">
<div class="checker" id="checker-1" data-slot="slot-1" draggable="true">
</div>
</div>
<div class="slot" id="slot-2"></div>
您还可以考虑以下几点。
$(function() {
$(".checker").draggable();
$(".slot").droppable({
accept: ".checker",
drop: function(event, ui) {
ui.draggable.appendTo(this).attr("style", "");
console.log("Got " + ui.draggable.attr("id"));
}
});
});.slot {
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid black;
}
.checker {
width: 50px;
height: 50px;
background: blue;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div class="slot" id="slot-1">
<div class="checker" id="checker-1" data-slot="slot-1" draggable="true">
</div>
</div>
<div class="slot" id="slot-2"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70761288
复制相关文章
相似问题
腾讯云开发者
