Question

我在屏幕上动态定位图像。每个图像都有一个+/-按钮来修改它的大小（显示在div鼠标悬停上的img顶部）。每张图片都必须是可拖动的。

如果我将img设置为class="drag"我的javascript工作正常但它对div不起作用 - 显然我也希望按钮也能拖动。这是html片段（位于div内position:relative）：

<div class="drag" onmouseover="showDIVChild(this)" onmouseout="hideDIVChild(this)">
  <img id="my_img_1" style="width:100; height:100;" src="http://www.whatever.com/images/whatever.jpg"/>
  <button id="but_A_1" style="display:none; width:10;height:15; position:absolute; left:5px; top:5px;" onClick="upSizeIMG('my_img_1')">+</button>
  <button id="but_B_1" style="display:none; width:10;height:15; position:absolute; left:20px; top:5px;" onClick="downSizeIMG('my_img_1')">-</button>
</div>

我正在使用Luke Breuer提供的Javascript。注意'拖'类在CSS中设置了position:absolute。

div为什么不拖？（所有其他功能都有效）

Answer 1

最后我找到了答案。我在onMOuseDown函数中调整了Luke的代码，如下所示。注意，我并没有说他的代码有什么问题 - 这正是我在div中有一个img所需要的东西;因为img得到了“拖动”。事件而不是div。

在：

var target = e.target != null ? e.target : e.srcElement;

后：

var target = e.target != null ? e.target.parentNode : e.srcElement.parentNode;

<div>不会拖动</div>

1 个答案: