drag-and-drop - HTML5 - 使用 div 和内部图像拖放

Question

我有这种类型的元素:

<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>

我希望能够:

1. 拖动整个 div，即使我点击/anchorimage(在拖动之前)。
2. 仍能正常响应 anchor /图像点击(无需拖动)。

现在，当我点击它时，只有图像被拖动。

这是一个 fiddle :http://jsfiddle.net/M5tBd/

Answer 1

根据 HTML5 Editor's Draft spec , 图片和带有 href 元素的 anchor 都是默认可拖动的元素。您的 anchor 可能正在捕获 dragstart 事件，从而阻止 div 得到它。尝试在您的 <img> 上设置 draggable="false"和 <a>元素。

<div draggable="true" id="item" style="margin:20px;background:red;height:400px;width:400px;">
<a href="#" target="_blank" draggable="false">
    <img style="margin:40px;" src="http://www.placekitten.com/100/100" alt="" draggable="false">
</a>

在 Ubuntu 下的 Chrome 中，您的 fiddle 甚至无法为我拖动 img 元素，因此您可能还有其他问题。