HTML5 - 使用div和内部图像拖动N Drop [英] 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编辑器草案规范，具有href元素的图像和锚点都是默认拖动的元素。您的主机可能是捕获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在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 Drop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！