HTML5 拖放，放置的 div 从放置的位置移动了一点
Posted
技术标签:
【中文标题】HTML5 拖放，放置的 div 从放置的位置移动了一点【英文标题】：HTML5 drag and drop, dropped div moves a bit from dropped position 【发布时间】：2014-12-26 17:42:15 【问题描述】：我有以下工作代码 (also see this fiddle)：
<!DOCTYPE html>
<html>
<head>
<style>
#div1 width:350px;height:170px;padding:10px;border:1px solid #aaaaaa;
#drag1 width:50px;height:50px;padding:10px;border:1px solid #000;background-color: #f00; position: absolute;
</style>
<script>
function allowDrop(ev)
ev.preventDefault();
function drag(ev)
ev.dataTransfer.setData("text/html", ev.target.id);
function drop(ev)
ev.preventDefault();
var data = ev.dataTransfer.getData("text/html");
ev.target.appendChild(document.getElementById(data));
//window.alert( ev.clientX + ',' + ev.clientY);
document.getElementById("drag1").style.left = ev.clientX + 'px';
document.getElementById("drag1").style.top = ev.clientY + 'px';
return false;
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag1" draggable="true" ondragstart="drag(event)"></div>
</div>
</body>
</html>
在这里，您只能将彩色 div 拖放到主 div 内。问题是这个红色的 div 从他掉落的位置跳了一点。我认为这是因为我使用了鼠标 ev.clientX 和 Y。那么我该如何解决这个问题，让 DIV 保持在放置的位置？
function allowDrop(ev)
ev.preventDefault();
function drag(ev)
ev.dataTransfer.setData("text/html", ev.target.id);
function drop(ev)
ev.preventDefault();
var data = ev.dataTransfer.getData("text/html");
ev.target.appendChild(document.getElementById(data));
//window.alert( ev.clientX + ',' + ev.clientY);
document.getElementById("drag1").style.left = ev.clientX + 'px';
document.getElementById("drag1").style.top = ev.clientY + 'px';
return false;
#div1 width:350px;height:170px;padding:10px;border:1px solid #aaaaaa;
#drag1 width:50px;height:50px;padding:10px;border:1px solid #000;background-color: #f00; position: absolute;
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag1" draggable="true" ondragstart="drag(event)"></div>
</div>【问题讨论】：
U r 防止默认很多。如果您删除所有这些并仅测试 d&d 会发生什么？ 如果它在 jsfiddle 中不起作用，您可能只需要更改设置，以便将 js 放在头部而不是 onload 中。 jsfiddle.net/x0ez95g7 啊，谢谢你的提示！ 更新了问题和代码，希望有人能帮帮我 【参考方案1】：您将 div 的左上角放到鼠标的位置，您必须找到鼠标实际拖动的 div 内部的偏移量。通过检查事件对象（在 chrome 中），offsetX 和 offsetY 和 layerX 和 layerY 似乎有从 div 的原点到鼠标的偏移量。
这是一个关于 offsetXY 和 layerXY 以及相关属性event.offsetX in Firefox 的大量讨论的问题，注意：不要只阅读已接受的答案。
function allowDrop(ev)
ev.preventDefault();
function drag(ev)
ev.dataTransfer.setData("application/json",
JSON.stringify([ev.target.id,
(ev.offsetX || ev.clientX - $(ev.target).offset().left),
(ev.offsetY || ev.clientY - $(ev.target).offset().top)]
));
function drop(ev)
ev.preventDefault();
var data = JSON.parse(ev.dataTransfer.getData("application/json"));
ev.target.appendChild(document.getElementById(data[0]));
//window.alert( ev.clientX + ',' + ev.clientY);
document.getElementById("drag1")
.style.left = ev.clientX - data[1] + 'px';
document.getElementById("drag1").style.top = ev.clientY - data[2] + 'px';
return false;
#div1 width:350px; height:170px; padding:10px; border:1px solid #aaaaaa;
#drag1 width:50px; height:50px; padding:10px; border:1px solid #000; background-color: #f00; position: absolute; <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag1" draggable="true" ondragstart="drag(event)"></div>
</div>【讨论】：
感谢您的演示！但是，如果我稍微移动方块，它就不会移动。为什么？ 这很棒。在这个问题上卡了一整天。谢谢大佬。 与@balazs630 相同的评论。知道为什么在稍微移动方块后尝试下降似乎不会触发下降事件吗？以上是关于HTML5 拖放，放置的 div 从放置的位置移动了一点的主要内容，如果未能解决你的问题，请参考以下文章