Firefox not recognizing drag of non-images

Question

TLDR

For some reason Firefox is recognizing a dragstart on the correct element, but it is only allowing drag operations to be carried out on an image within an element instead of the whole element. (While this is an Angular app, I don't think the problem has anything to do with Angular)

<ul>
  <li my-draggable="true" data-contentid="123">
    <div>
      <img src="thing.jpg" alt="thing"/>
      <p>Stuff</p>
      <button>Whatever</button>
    </div>
  </li>
 </ul>


<section>
  <div my-dropover="row">
    <h1>Add stuff</h1>
  </div>
</section>


    function dragFunction(scope, elem, attr){
      var el = elem[0];
      el.draggable = true;

      elem.on('dragstart', function(event){
        event.originalEvent.dataTransfer.effectAllowed="move";
        console.log('start');
        console.log(event);
      });

      elem.on('dragend', function(){
       console.log('done');
      });
    }

     function dropFunction(scope, elem, attr){
       elem.on('dragenter', function(event){
         console.log('entering');
       });
       elem.on('dragleave', function(event({
         console.log('leaving');
       });
     }

angular.module('app').directive('myDraggable', function(){
  return {
    link: dragFunction
  };
}).directive('myDropover', function(){
   return {
     scope: true,
     link: dropFunction
   };
});

Result

In Chrome, everything works as expected-- Dragging any part of the li will cause the dragstart event to fire, dragging over the my-dropover thing will cause dragenter and dragleave events to fire properly, etc.

In Firefox, however, only when you drag the image will all the drag events work properly-- and it only shows an image of the image being dragged. If you drag any other parts of the li (the button, the paragraph, etc) the dragstart WILL fire, but there is no drag ghost thing, and none of the other drag events fire. which is weird. because if it were not going to work,

why would the dragstart fire but none of the other stuff?

what can I do to make firefox act like chrome- the whole LI should appear to being dragged, not just the image?

Andrew Luhring Andrew Luhring · Accepted Answer · 2016-07-14T20:25:27

Of course, as soon as i post the question i discover the anser:

in the dragstart event, i needed to use setData:

        elem.on('dragstart', function (event) {
            console.log(event);
            event.originalEvent.dataTransfer.effectAllowed = 'move';
            event.originalEvent.dataTransfer.setData('text/html', event.target.innerHTML);

        });

Firefox not recognizing drag of non-images

TLDR

Result

1 Answers