Question

I am dynamically positioning images onscreen. Each image has a +/- button to modify its size (displays on top of img on div mouseover). Each image must be dragabble.

My javascript works fine if I set the img as class="drag" but it does not work for the div – obviously I want the buttons to drag too. Here is the html fragment (which resides inside a div with 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>

I am using Javascript as provided by Luke Breuer. NB The ‘drag’ class has position:absolute set in CSS.

Why won’t the div drag? (All the other functionality is working)

Answer 1

In the end I found the answer. I adjusted Luke’s code in the onMOuseDown function as follows. NB I’m, not saying there was anything wrong with his code – this is just what I need when a div has an img in it; as the img gets the ‘drag’ event instead of the div.

Before:

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

After:

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