HTML5 - 使用 div 和内部图像拖放 N [英] HTML5 - Drag N Drop with divs and inner-images

问题描述

我有这种类型的元素:

<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. 仍能正常响应锚点/图像点击(无需拖动).

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

Right now, only the image is dragged when I click on it.

这是一个小提琴:http://jsfiddle.net/M5tBd/

推荐答案

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

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.

<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 中，您的小提琴甚至无法为我拖动 img 元素，因此您可能还有其他问题.

Your fiddle doesn't even work dragging the img element for me in Chrome under Ubuntu, so you may have other issues besides this.

这篇关于HTML5 - 使用 div 和内部图像拖放 N的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！