A request from the client is to make a whole div draggable, which contains text and an image. To achieve this, I transformed the div into an <li> tag and utilized Mootools draggable features for functionality. However, a problem arises when the client attempts to drag the image in Internet Explorer. The browser interprets this action as dragging the image itself and neglects the drag and drop events for the parent li element.
Is there any solution to prevent the image from being draggable or to trigger the parent's onmousedown event instead?
Below is a snippet of the HTML code:
<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 is a portion of the JS code used for drag and drop functionality:
// 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());
var drag = clone.makeDraggable({
droppables: [TrailStream.playlist],
precalculate: true,
revert: true,
}
});
drag.start(e);
});
});