1

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

2 回答 2

1

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

拖动子元素时触发父元素的“dragleave”

在你的情况下：

.asset_list * {
    pointer-events: none;
}

简单有效:)

于 2015-10-01T09:51:39.857 回答
0

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

于 2009-12-18T15:35:12.897 回答