可拖动div内的图像拖住了我的拖放位置

Question

客户要求整个div可拖动，该div包含一些文本和图像。我将div转换为<li>标签，并使用Mootools可拖动的好东西使其全部正常工作。直到客户端单击图像并开始在IE中拖动它。然后浏览器认为您要拖动图像，而忽略父li的拖放事件。

关于我可以采取什么措施来阻止图像可拖动？还是至少触发父母的onmousedown事件？

以下是一些示例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>

这是一些我用来拖放的JS：

// 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

5年后，我遇到了同样的问题，发现这是最适合我的解决方案：

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

根据您的情况：

.asset_list * {
    pointer-events: none;
}

简单有效：）

Answer 2

通过将图像转换为跨度，并采用与图像的宽度，高度，边框等相同的样式，然后将背景图像设置为嵌入式样式，解决了这一问题。 IE现在将其像对待任何其他HTML元素一样对待，而不是像“图像”一样对待，因此拖动是固定的。并非完美的可访问性友好，但是两者都不可拖放！