可拖动 div 内的图像在拖动时停止了我的拖放

Posted 2023-05-08

【中文标题】可拖动 div 内的图像在拖动时停止了我的拖放

【英文标题】：Image inside dragable div is stalling my drag and drop when dragged

【发布时间】：2010-12-28 01:08:59

【问题描述】：

客户要求整个 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
 );
);

【问题讨论】：

如果您的 LI 中有任何浮动，请确保您正确清除它们，因为它们的盒子模型不会覆盖浮动元素（可能会导致此问题）。

【参考方案1】：

5 年后，我遇到了同样的问题，我发现这个问题对我来说是最好的解决方案：

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

在你的情况下：

.asset_list * 
    pointer-events: none;

简单有效:)

【参考方案2】：

通过将图像转换为与图像在宽度、高度、边框等方面具有相同样式的跨度并将背景图像设置为内联样式来解决此问题。 IE 现在将其视为任何其他 HTML 元素而不是“图像”，因此拖动是固定的。不是完全可访问性友好，但拖放也不是！