Iframes In Moving Divs

[morrisjohnny]

using this script i'm embedding iframes into divs which are then being moved by the user.However this only works with one div. i was wondering is their a way to do this using javscript as iframes is the only way it's going to work. Not using AJAX

<script type="text/javascript">if  (document.getElementById){(function(){//Stop Opera selecting anything whilst dragging.if (window.opera){document.write("<input type='hidden' id='Q' value=' '>");}var n = 500;var dragok = false;var y,x,d,dy,dx;function move(e){if (!e) e = window.event; if (dragok){  d.style.left = dx + e.clientX - x + "px";  d.style.top  = dy + e.clientY - y + "px";  return false; }}function down(e){if (!e) e = window.event;var temp = (typeof e.target != "undefined")?e.target:e.srcElement;if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){ temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; }if (temp.className == "dragclass"){ if (window.opera){  document.getElementById("Q").focus(); } dragok = true; temp.style.zIndex = n++; d = temp; dx = parseInt(temp.style.left+0); dy = parseInt(temp.style.top+0); x = e.clientX; y = e.clientY; document.onmousemove = move; return false; }}function up(){dragok = false;document.onmousemove = null;}document.onmousedown = down;document.onmouseup = up;})();}//End.</script>

[justsomeguy]

What only works with one div? What are the other divs doing? Are you sure this code is going to get the correct element:if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){ temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;}The first part of that condition is not going to target elements that are either HTML or BODY elements, the operator you're using is a bitwise operator. So that's going to take the binary representations of the strings "HTML" and "BODY" and do a binary OR on them, and the result is going to be another string. If I remember correctly from school, it should do something like thisH = 0x48 = b01001000T = 0x54 = b01010100M = 0x4D = b01001101L = 0x4C = b01001100B = 0x42 = b01000010O = 0x4F = b01001111D = 0x44 = b01000100Y = 0x59 = b01011001

	   HTML = 01001000010101000100110101001100	   BODY = 01000010010011110100010001011001HTML | BODY = 01001010010111110100110101011101			= J	   _	   M	   ]

So when you tell it to search for "HTML" | "BODY", you're telling it to search for "J_M]", which is probably not what you're looking for. That's what a bitwise operator does though. If you use || instead, so "HTML" || "BODY", then it converts both strings to boolean values. The boolean conversions of non-empty strings will be "true", so "HTML" || "BODY" is true || true, or just true. So that's not right either, then you're testing for temp.tagName != true. You need to split the condition up into two separate conditions.Also, use Firebug to write temp to console.log and make sure it is the element that you think it is.

[morrisjohnny]

That code is placed into Divs, within that div is an iframe; now if their is just one iframe on the page the script works fine, however if their are two iframes within two different divs it only works on the first div that is created.If i removed the iframes from the divs so the divs are still the same (just with an iframe missing) both of them work fine.The problem is in FireFox the div becomes moveable although the mouse seems to "jump" into the iframe and then once trying to drag it it only moves the div (and iframe) once the mouse leaves the iframe theirfore making it unable to click and stop the dragging and dropping process.

[justsomeguy]

I haven't tried to drag an iframe before, so I'm not sure what the considerations are with that. I'm not sure if the parent's DOM has an effect on the iframe's DOM or vice versa. Just to clarify though, the Javascript shouldn't go in each individual div, it should only be on the page once. That code will apply to the entire page, you don't need to put it inside each div.