Javascript – Html5 Drag and Drop Mouse Position in Firefox

drag and drophtmljavascript

I have an HTML5 application which utilizes drag and drop. Essentially the user can drag an image from a "drawer" onto a canvas to create a larger image. I want the elements to drop in the place where they were release. I have this working in all browsers except Firefox.

On the drop event, I am using the following to get the coordinates of the mouse, and calculate the position of the dropped image within the canvas.

var top = evt.originalEvent.offsetX;
var left = evt.originalEvent.offsetY;

The issue is, this property is not available in FF. Is there any other way to get this? Without it, I can't see how to possible drag and move elements within FF.

Note: I am not using the canvas element. I am dropping images to a div. Not sure if that matters.

Best Answer

Try this in firefox..

var X = event.layerX - $(event.target).position().left;
var Y = event.layerY - $(event.target).position().top;

Related Solutions

Javascript – Drag-and-drop file upload in Google Chrome/Chromium and Safari

WARNING: This is compatibility code for very old versions of Safari and Chrome. Modern browsers all support the FileReader API; here's one tutorial: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

This code is now only useful if for some reason you have a need to support Safari 5 and older, or Chrome 6 and older.

One possibility is to use the method used in SwellJS:

Use <input type="file" multiple="multiple" /> like so:

<form method="post" enctype="multipart/form-data" id="uploadform">
  <input type="file" name="dragupload[]" multiple="multiple"
  onchange="if (this.value) document.getElementById('uploadform').submit();" />
</form>

The input element can be styled to have opacity: 0 and positioned (absolutely) over an element that accepts uploads. The entire form can be placed inside an iframe for "pseudo-Ajax" like behavior. And the upload element can be a layer hidden until something is dragged over it.

Such an iframe would look like:

<script>
<!--
  var entered = 0;
-->
</script>
<body ondragenter="entered++;document.getElementById('uploadelement').style.display='block'" ondragleave="entered--;if (!entered) document.getElementById('uploadelement').style.display='none'">
  <form method="post" enctype="multipart/form-data" id="uploadform">
    Things can be dragged and dropped here!
    <input type="file" id="uploadelement" name="dragupload[]" multiple="multiple" onchange="if (this.value) { document.getElementById('uploadform').submit(); }" style="display:none;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;" />
  </form>
</body>

This should only be done when Safari or Chrome is detected (since other browsers don't support drag-and-drop onto <input type="file" /> elements), and can be used in combination with the HTML5 drop event for Firefox 3.6+.

I can't tell if this is the method Gmail uses, but it certainly works about as well.

Javascript – How to remove a file from the FileList

If you want to delete only several of the selected files: you can't. The File API Working Draft you linked to contains a note:

The HTMLInputElement interface [HTML5] has a readonly FileList attribute, […]
[emphasis mine]

Reading a bit of the HTML 5 Working Draft, I came across the Common input element APIs. It appears you can delete the entire file list by setting the value property of the input object to an empty string, like:

document.getElementById('multifile').value = "";

BTW, the article Using files from web applications might also be of interest.

Best Answer

Related Solutions

Javascript – Drag-and-drop file upload in Google Chrome/Chromium and Safari

Javascript – How to remove a file from the FileList

Related Topic