可拖动 div 内的图像在拖动时阻碍了我的拖放
客户要求整个 div 是可拖动的，div 包含一些文本和图像。我将 div 转换为
关于如何阻止图像被拖动的任何线索？或者至少触发父级的 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
});
});
Client has asked that a whole div is dragable, the div contains some text and an image. I converted the div to be a <li> tag and used Mootools draggable goodies to get it all working. That is until the client clicks on the image and starts dragging it in IE. Then the browser thinks you want to drag the image around and ignores the drag and drop events for the parent li.
Any clues as to what I can do to stop the image being draggable? Or at least to trigger the parent's onmousedown event?
Here's some sample 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>
And here's some of the JS I use to do the drag and drop:
// 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
});
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
通过将图像转换为与图像的宽度、高度、边框等具有相同样式的跨度图像，并将背景图像设置为内联样式，可以解决此问题。 IE 现在将其视为任何其他 HTML 元素而不是“图像”，因此拖动是固定的。辅助功能并不完全友好，但拖放也不是！
Got around this by converting the images to be span's with the same styles that the image had on it for width, height, border, etc. and setting the background-image in an inline style. IE now treats it like any other HTML element rather than an "image" so the dragging is fixed. Not perfectly accessibility friendly but then neither is dragging and dropping!
5年后，我遇到了同样的问题，我发现这对我来说是最好的解决方案：
拖动子元素时父元素的“dragleave”会触发
在您的情况下：
简单而有效:)
5 years later, I came across the same problem, and I found this one to be the best solution for me:
'dragleave' of parent element fires when dragging over children elements
In your case:
Simple and effective :)