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
 });
});

Answer 1

Got around this by converting the images to be span’s with the same styles that the image had on it for width, height, border, etc. and setting the background-image in an inline style. IE now treats it like any other HTML element rather than an “image” so the dragging is fixed. Not perfectly accessibility friendly but then neither is dragging and dropping!