javascript - 不会拖

Question

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

如果我将 img 设置为，我的 javascript 工作正常，class="drag"但它不适用于 div - 显然我希望按钮也可以拖动。这是 html 片段（位于divwith内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 。注意 'drag' 类已position:absolute在 CSS 中设置。

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

Answer 1

最后我找到了答案。我在 onMOuseDown 函数中调整了 Luke 的代码如下。注意我不是说他的代码有什么问题——这正是我在 div 中有一个 img 时所需要的；因为 img 得到 'drag' 事件而不是 div。

前：

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

后：

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