HTML5拖放图像在Chromium(和Opera）中获得水平偏移

HTML5 Drag and Drop image gets horizontal offset in Chromium (and Opera)

本文关键字：水平 Opera 图像 拖放 Chromium HTML5      更新时间：2023-09-26

InChromium（版本45.0.2454.101 Ubuntu 15.04（64位））：

当我把两个可拖动的文本放在一起，并在右边的文本上开始拖动操作时，拖动图像会向左偏移一个奇怪的偏移。就好像它已经和左边的文本对齐了一样。

我在firefox中没有看到这种行为。

HTML5对我来说有点新，所以我不确定我做的每件事都对
这是个虫子吗
有办法绕过它吗？（不留下铬）；）

例如，使用DnD测试页面（下面的链接），并将其代码替换为下面的我的（稍微修改过的）代码。然后开始拖动"HelloHello2"文本：

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
    document.getElementById("div1").style.backgroundColor = "#EEEEEE";
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function restoreBg() {
    document.getElementById("div1").style.backgroundColor = "white";
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Start dragging the 'HelloHello2' text (into the rectangle):</p>
<div id="div1" ondrop="drop(event)" ondragleave="restoreBg()" ondragover="allowDrop(event)"></div>
<br>
<a id="drag1" draggable="true" ondragstart="drag(event)">HelloHello1</a><a id="drag2" draggable="true" ondragstart="drag(event)">HelloHello2</a>
</body>
</html>

我能够在Chrome和Opera（在Windows 64上）中重现这个问题，然后找到了导致这种行为的根本原因，但找不到任何参考来支持它为什么会这样工作（我稍后会检查并更新答案，如果我能找到的话）。

根本原因：可拖动元素（锚点）是inline元素。

解决方案：使用CSS使可拖动元素显示block（在您的情况下为inline-block），这将解决问题。

function allowDrop(ev) {
    ev.preventDefault();
    document.getElementById("div1").style.backgroundColor = "#EEEEEE";
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function restoreBg() {
    document.getElementById("div1").style.backgroundColor = "white";
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
#drag1, #drag2 { display:inline-block; }
<p>Start dragging the 'HelloHello2' text (into the rectangle):</p>
<div id="div1" ondrop="drop(event)" ondragleave="restoreBg()" ondragover="allowDrop(event)"></div>
<br>
<a id="drag1" draggable="true" ondragstart="drag(event)">HelloHello1</a><a id="drag2" draggable="true" ondragstart="drag(event)">HelloHello2</a>

相关文章：