HTML5 - 使用 div 和内部图像拖放
我有这种类型的元素：
<div draggable="true" id="item" style="margin:20px;background:red;height:400px;width:400px;">
<a href="#" target="_blank">
<img style="margin:40px;" src="http://www.placekitten.com/100/100" alt="">
</a>
</div>
我希望能够：
- 拖动整个 div，即使我单击 /anchorimage（拖动之前）。
- 仍能正常响应锚点/图像点击（无需拖动）。
现在，当我单击图像时，只会拖动图像。
这是一个小提琴： http://jsfiddle.net/M5tBd/
I have this type of element:
<div draggable="true" id="item" style="margin:20px;background:red;height:400px;width:400px;">
<a href="#" target="_blank">
<img style="margin:40px;" src="http://www.placekitten.com/100/100" alt="">
</a>
</div>
I want to be able to:
- Drag the whole div, even if I click on the /anchorimage (before dragging).
- Still respond normally to an anchor/image click (without a drag).
Right now, only the image is dragged when I click on it.
Here's a fiddle: http://jsfiddle.net/M5tBd/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
根据 HTML5 编辑器草案规范，带有 href 元素的图像和锚点都是以下元素：默认可拖动。您的锚点可能正在捕获 Dragstart 事件，从而阻止 div 获取它。尝试在
![]()
元素上设置draggable="false"。你的小提琴甚至无法在 Ubuntu 下的 Chrome 中为我拖动 img 元素，所以除此之外你可能还会遇到其他问题。
As per the HTML5 Editor's Draft spec, Images and Anchors with a href element are both elements that are, by default draggable. Your anchor is probably capturing the dragstart event, preventing the div from ever getting it. Try setting draggable="false" on your
<img>and<a>elements.Your fiddle doesn't even work dragging the img element for me in Chrome under Ubuntu, so you may have other issues besides this.