Mouse position wrong on Mac, OK on Windows

Report · Feb 23, 2011

I have an air app that uses HTML5 and Javascript, and the drag and drop events. On Windows, when the drag event fires, and then a drag is in progress, the mouse coordinates are consistent. That is, if I click on an object, in the center, and check the X and Y, I get a number, and as I drag 1 pixel to the left and down, the X and Y update as expected.

On Mac OSx, when I start a drag, the X and Y are right, but when the drag is on progress, the X and Y are offset. The offset appears to be equal to the bottom left corner of the object.

Specifically, if I have a 100x100 object in the center of a 1000 pixel stage, and I click on the middle, the dragstart event would have pageX and pageY properties of 500,500. If I drag down and left 1 pixel, I would expect 499,501. Instead, with the drag event, I get something close to 449,551. On Air under Windows XP, I get the expect value.

Is this a bug in Air, or something I may be doing wrong? I have tried various properties (screenX, pageX) with no luck. I cannot seem to get stageX and stageY to work within javascript in HTML5.

Report · Feb 28, 2011

Hi Noel,

Could you please be a little more specific? Are you using the ActionScript events (MouseEvent and the likes) or the JavaScript ones? Also, are you trying to build an HTML/JavaScript only application or are you using the HTMLLoader inside a Flex/Flash applications?

A sample code would help, too

I'll try to come up with a sample app, later this day.

Have a nice day,

Mihai Balan

Report · Feb 28, 2011

I'm using just HTML5 and Javascript. I am including sample code below. I based it on the example here: http://livedocs.adobe.com/flex/3/html/help.html?content=DragAndDrop_5.html. Compile the example as an Air file, and run on PC and Mac.

In the example, I added an alert to display the X and Y coordinates when a drag event is in progress. To see the problem, click on an obvious spot in the image, such as the upper-right corner of the "e" in "Once," and start dragging. On a PC, you should get a value close to 225,212. On a Mac, the value will be 44,312 (which corresponds to the lower left corner of the image). If you add an alert to dragstart, you should see that the x and y for the start event are correct on both systems.

Thanks in advance for your help.

Noel

<html>

<head>

function init(){

var target = document.getElementById('target');

target.addEventListener("dragenter", dragEnterOverHandler);

target.addEventListener("dragover", dragEnterOverHandler);

target.addEventListener("drop", dropHandler);

var source = document.getElementById('source');

source.addEventListener("dragstart", dragStartHandler);

source.addEventListener("dragend", dragEndHandler);

source.addEventListener("drag", dragHandler);

emptyRow = document.getElementById("emptyTargetRow");

}

function dragStartHandler(event){

event.dataTransfer.effectAllowed = "copy";

}

function dragHandler(event){

alert(event.pageX + " " + event.pageY);

}

function dragEndHandler(event){

air.trace(event.type + ": " + event.dataTransfer.dropEffect);

}

function dragEnterOverHandler(event){

event.preventDefault();

}

var emptyRow;

function dropHandler(event){

for(var prop in event){

air.trace(prop + " = " + event[prop]);

}

var row = document.createElement('tr');

row.innerHTML = "<td>" + event.dataTransfer.getData("text/plain") + "</td>" +

"<td>" + event.dataTransfer.getData("text/html") + "</td>" +

"<td>" + event.dataTransfer.getData("text/uri-list") + "</td>" +

"<td>" + event.dataTransfer.getData("application/x-vnd.adobe.air.file-list") +

"</td>";

var imageCell = document.createElement('td');

if((event.dataTransfer.types.toString()).search("image/x-vnd.adobe.air.bitmap") > -1){

imageCell.appendChild(event.dataTransfer.getData("image/x-vnd.adobe.air.bitmap"));

}

row.appendChild(imageCell);

var parent = emptyRow.parentNode;

parent.insertBefore(row, emptyRow);

}

</script>

</head>

<div>

<h1>Source</h1>

<p>Items to drag:</p>

<li>Plain text.</li>

<li>HTML <b>formatted</b> text.</li>

Uses "-webkit-user-drag:none" style.

</li>

Uses "-webkit-user-select:none" style.

</li>

</ul>

</div>

<h1 >Target</h1>

<p>Drag items from the source list (or elsewhere).</p>

<tr><th>Plain text</th><th>Html text</th><th>URL</th><th>File list</th><th>Bitmap Data</th></tr>

</table>

</div>

</body>

</html>

Report · Mar 01, 2011

Hi Noel,

I tested your sample with our latest builds and indeed it looks like we have a bug on Mac. I have logged a bug (internal reference number #2818702 ) and will keep you posted on how this works. I cannot promise however how fast it will get fixed.

Thanks a lot for your help,

Mihai