Image inside dragable div is stalling my drag and drop when dragged

Question

Client has asked that a whole div is dragable, the div contains some text and an image. I converted the div to be a <li> tag and used Mootools draggable goodies to get it all working. That is until the client clicks on the image and starts dragging it in IE. Then the browser thinks you want to drag the image around and ignores the drag and drop events for the parent li.

Any clues as to what I can do to stop the image being draggable? Or at least to trigger the parent's onmousedown event?

Here's some sample HTML:

<ul class="asset_list">
  <li id="1"><img src="test1.jpg" />Blah blah blah</li>
  <li id="2"><img src="test2.jpg" />Blah blah blah</li>
  <li id="3"><img src="test3.jpg" />Blah blah blah</li>
</ul>

And here's some of the JS I use to do the drag and drop:

// Set up drap and drop
$$( 'ul.asset_list li' ).each( function( item ){
 item.removeEvents();
 item.addEvent('mousedown', function(e) {
  e = new Event(e).stop();

  // Create our clone of the asset for dragging
  var clone = this.clone( true, true );
  clone.removeEvents();
  clone.addClass( "dragging" );
  clone.setStyles(this.getCoordinates()); // this returns an object with left/top/bottom/right, so its perfect

  var drag = clone.makeDraggable({
    droppables: [TrailStream.playlist],
    precalculate: true,
    revert: true,
   }
  }); // this returns the dragged element

  drag.start(e); // start the event manual
 });
});

If you have any floats inside of your LI make sure you are clearing them properly as their box model would not cover the floated elements (and perhaps cause this issue). — Corey Ballou

NublicPablo NublicPablo · Accepted Answer · 2015-10-01T09:51:39

5 years later, I came across the same problem, and I found this one to be the best solution for me:

'dragleave' of parent element fires when dragging over children elements

In your case:

.asset_list * {
    pointer-events: none;
}

Simple and effective :)

Image inside dragable div is stalling my drag and drop when dragged

2 Answers