CODEWITHSUNDEEP
javascripthtml
x_0_x
x_0_x

Reputation: 3

Getting drag and drop to work in firefox

I want to displayan alert box showing the source of images that are dragged into the #dropzone.

Can anyone see what I'm doing wrong here?

<img src="http://upload.wikimedia.org/wikipedia/en/5/53/Arsenal_FC.svg" alt="arsenal">
<div id="dropzone"></div>

<script>
var drop = document.getElementById(‘dropzone’);

drop.ondrop = function (event) {
   window.alert(event.dataTransfer.getData(‘Text’));
   return false;
};

drop.ondragover = function () { return false; };
drop.ondragenter = function () { return false; };
</script>

Upvotes: 0

Views: 205

Answers (2)

janybravo
janybravo

Reputation: 21

Most web browsers requires one to prevent default action on dragenter and dragover to be able to catch drop event.

drop.ondragover = function (ev) { 
  ev.preventDefault();
  return false; 
};
drop.ondragenter = function (ev) { 
  ev.preventDefault();
  return false; 
};

Upvotes: 2

dev-null-dweller
dev-null-dweller

Reputation: 29462

Few Ideas:

  1. It seems that you have copied this code from some website, without correcting quotes. ‘dropzone’ should be 'dropzone'
  2. Div without content is practically invisible. Do you have any css style for height and width?
  3. To get dropped file name you should use something like event.dataTransfer.files[0].fileName

Upvotes: 2

Related Questions