CODEWITHSUNDEEP
javascripthtmldrag-and-dropchromium
Thaki
Thaki

Reputation: 23

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

In Chromium (Version 45.0.2454.101 Ubuntu 15.04 (64-bit)):

When I put two draggable texts next to each other, and start a drag operation on the right one, the drag image gets a weird offset to the left. As if it had been aligned with the left text.

I don't see this behavior in firefox.

HTML5 is a bit new to me, so I'm not sure I'm doing everything right.
Is this a bug?
Is there a way around it? (without leaving Chromium) ;)

Use for example the DnD test page (link below) and replace its code with my (slightly altered) code below. Then start dragging the 'HelloHello2' text:

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>

Upvotes: 0

Views: 1000

Answers (1)

Alvaro Montoro
Alvaro Montoro

Reputation: 29695

I was able to reproduce the issue in Chrome and Opera (on Windows 64), then found what seems to be the root cause for this behavior, but couldn't find any reference to support why it works that way (I'll check later and update the answer if I can find it).

Root cause: the draggable element (anchors) are inline elements.

Solution: make the draggable elements have a display of block (or inline-block in your case) using CSS, and that will solve the problem.

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>

Upvotes: 1

Related Questions