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

Question

在 Chromium（版本 45.0.2454.101 Ubuntu 15.04（64 位））中：

当我将两个可拖动文本并排放置，并在右侧开始拖动操作时，拖动图像向左偏移了一个奇怪的位置。好像已经和左边的文字对齐了。

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

HTML5 对我来说有点陌生，所以我不确定我做的是否正确。
这是一个错误吗？
有办法解决吗？（不离开 Chromium）;)

例如使用 DnD 测试页面（下面的 link）并将其代码替换为我的（略微更改的）下面的代码。然后开始拖动'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>

Answer 1

我能够在 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>

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

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

javascript

html

drag-and-drop

chromium