1069888 - Dropping on elements inside a div with drop-handler produces strange results

Status: RESOLVED INVALID

(Core :: DOM: Copy & Paste and Drag & Drop, defect)

Description

[David]

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0
Build ID: 20140917194002

Steps to reproduce:

I have a div with a drop event handler. The goal is to drop stuff on an element _inside_ the div, not on the div itself (reason explained below).

It is implemented as angular directive as follows:

  <div data-drop-zone="myFunc">
    <canvas id="foo"></canvas>
  </div>

the directive enables drag and drop as follows:

  myModule.directive('dropZone', function () {
    return function (scope, element, attrs) {
      element.on('dragover', function (e) {
        e.preventDefault();
        return false;
      });

      if (attrs.dropZone && (typeof scope[attrs.dropZone] === 'function')) {
        element.on('drop', scope[attrs.dropZone]);
      }
    };
  });

I chose this path because a library i use creates an overlay canvas, breaking the drop capability of the lower one.


Actual results:

If i drag an image over the div>canvas the mouse cursor gets the correct icon (from not allowed to allowed). But if i actually drop the image, the handler function does not get called, but the image gets shown full-browser-window instead (the same as in "right klick on image" -> "show image")


Expected results:

In Chrome, the handler function gets called as expected.

Comment 1

[David]

Not a bug at all. Seems Firefox is the only browser which's drop event needs to be prevented.