javascript - 可拖动 div 内的图像在拖动时阻碍了我的拖放

Question

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

关于如何阻止图像被拖动的任何线索？或者至少触发 parent 的 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;
}

简单有效:)