Hi, Having a problem with Internet Explorer and DOM-Drag.
This all works perfectly in Firefox, Chrome, Safari etc. In Internet Explorer it gives the error:
Undefined. Line 16 of dom-drag.js - Object not found.
Any help at all on why this happening would be much appreciated, I have tried everything I can think of including wrapping the images in absolute, relative divs etc.
Thanks
js/dom-drag.js
/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX = typeof minX != 'undefined' ? minX : null;
o.minY = typeof minY != 'undefined' ? minY : null;
o.maxX = typeof maxX != 'undefined' ? maxX : null;
o.maxY = typeof maxY != 'undefined' ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
Drag.obj = null;
},
fixE : function(e)
{
if (typeof e == 'undefined') e = window.event;
if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
return e;
}
};
The HTML generated by my PHP code looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<link type="text/css" rel="stylesheet" href="css/drag-ui.css" />
<head>
<script language="javascript" src="js/dom-drag.js"></script>
<script language="javascript" src="js/static.js"></script><script language="javascript">
var reportBox, iReportCount = 0;
window.onload = function() {
if (document.all || document.getElementById)
{
var o47 = document.all ? document.all["47"] : document.getElementById("47")
var o45 = document.all ? document.all["45"] : document.getElementById("45")
var o55 = document.all ? document.all["55"] : document.getElementById("55")
var o61 = document.all ? document.all["61"] : document.getElementById("61")
reportBox = document.all ? document.all["data"] : document.getElementById("data")
Drag.init(o47, null, 0, 280, 0, 430);
Drag.init(o45, null, 0, 280, 0, 430);
Drag.init(o55, null, 0, 280, 0, 430);
Drag.init(o61, null, 0, 280, 0, 430);
o47.onDragEnd = function(x, y) { reportDragEnd("47", x, y); }
o45.onDragEnd = function(x, y) { reportDragEnd("45", x, y); }
o55.onDragEnd = function(x, y) { reportDragEnd("55", x, y); }
o61.onDragEnd = function(x, y) { reportDragEnd("61", x, y); }
}
function reportDragEnd(who, x, y) {
reportBox.value += who + "," + "" + x + "," + y + "\
"
}
}
</script></head>
<body>
<img id="47" style="position:absolute; top:236px; left:208px; z-index:47; cursor:move; width:170px; height:170px" src="imgs/s2.jpg" onclick="SwitchMenu('options_47')"/>
<img id="45" style="position:absolute; top:32px; left:7px; z-index:45; cursor:move; width:170px; height:170px" src="imgs/t1.png" onclick="SwitchMenu('options_45')"/>
<img id="55" style="position:absolute; top:32px; left:191px; z-index:55; cursor:move; width:170px; height:170px" src="imgs/t4.png" onclick="SwitchMenu('options_55')"/>
<img id="61" style="position:absolute; top:216px; left:32px; z-index:61; cursor:move; width:170px; height:170px" src="imgs/1.jpg" onclick="SwitchMenu('options_61')"/>
<div class="panel">
<form action="savedragdrop.php" name="panel" method="POST">
<div style="font-size:15px; margin-top:5px; margin-bottom:10px;"><strong>My Outfit 1</strong></div>
<div style="margin-top:5px; margin-bottom:5px;">
<input type="button" onclick="this.form.elements['action'].value = 'additem'; document.forms['panel'].submit();" style="width:115px; height:25px; border:0px; margin-right:0px; background-image:url(images/ui/add_items.jpg);">
<input type="submit" onclick="this.form.elements['action'].value = 'save';" style="width:115px; height:25px; border:0px; background-image:url(images/ui/save_exit.jpg);" value="">
</div>
<div id="masterdiv"><div class="menutitle" style="background-image:url(images/ui/item_bg.jpg); width:225px; height:20px; padding-top:5px; padding-left:8px; margin-bottom:2px" onclick="SwitchMenu('options_47')">Supra TK Society</div>
<span class="submenu" id="options_47">
<input type="button" style="width:115px; height:25px; border:0px; margin-right:0px; margin-bottom:2px; background-image:url(images/ui/increase_size.jpg);">
<input type="button" style="width:115px; height:25px; border:0px; margin-right:0px; margin-bottom:2px; background-image:url(images/ui/decrease_size.jpg);">
<input type="button" style="width:115px; height:25px; border:0px; margin-right:0px; margin-bottom:4px; background-image:url(images/ui/delete_item.jpg);">
<input type="button" style="width:115px; height:25px; border:0px; margin-right:0px; margin-bottom:4px; background-image:url(images/ui/bring_to_top.jpg);">
</span>
<div class="menutitle" style="background-image:url(images/ui/item_bg.jpg); width:225px; height:20px; padding-top:5px; padding-left:8px; margin-bottom:2px" onclick="SwitchMenu('options_45')">Blue Plain T-Shirt</div>
<span class="submenu" id="options_45">
<input type="button" style="width:115px; height:25px; border:0px; margin-right:0px; margin-bottom:2px; background-image:url(images/ui/increase_size.jpg);">
<input type="button" style="width:115px; height:25px; border:0px; margin-right:0px; margin-bottom:2px; background-image:url(images/ui/decrease_size.jpg);">
<input type="button" style="width:115px; height:25px; border:0px; margin-right:0px; margin-bottom:4px; background-image:url(images/ui/delete_item.jpg);">
<input type="button" style="width:115px; height:25px; border:0px; margin-right:0px; margin-bottom:4px; background-image:url(images/ui/bring_to_top.jpg);">
</span>
<div class="menutitle" style="background-image:url(images/ui/item_bg.jpg); width:225px; height:20px; padding-top:5px; padding-left:8px; margin-bottom:2px" onclick="SwitchMenu('options_55')">Navy Plain T-Shirt</div>
<span class="submenu" id="options_55">
<input type="button" style="width:115px; height:25px; border:0px; margin-right:0px; margin-bottom:2px; background-image:url(images/ui/increase_size.jpg);">
<input type="button" style="width:115px; height:25px; border:0px; margin-right:0px; margin-bottom:2px; background-image:url(images/ui/decrease_size.jpg);">
<input type="button" style="width:115px; height:25px; border:0px; margin-right:0px; margin-bottom:4px; background-image:url(images/ui/delete_item.jpg);">
<input type="button" style="width:115px; height:25px; border:0px; margin-right:0px; margin-bottom:4px; background-image:url(images/ui/bring_to_top.jpg);">
</span>
<div class="menutitle" style="background-image:url(images/ui/item_bg.jpg); width:225px; height:20px; padding-top:5px; padding-left:8px; margin-bottom:2px" onclick="SwitchMenu('options_61')">Supra Skytop II</div>
<span class="submenu" id="options_61">
<input type="button" style="width:115px; height:25px; border:0px; margin-right:0px; margin-bottom:2px; background-image:url(images/ui/increase_size.jpg);">
<input type="button" style="width:115px; height:25px; border:0px; margin-right:0px; margin-bottom:2px; background-image:url(images/ui/decrease_size.jpg);">
<input type="button" style="width:115px; height:25px; border:0px; margin-right:0px; margin-bottom:4px; background-image:url(images/ui/delete_item.jpg);">
<input type="button" style="width:115px; height:25px; border:0px; margin-right:0px; margin-bottom:4px; background-image:url(images/ui/bring_to_top.jpg);">
</span>
</div>
<textarea id="data" name="data" style="width:50px; height:100px; visibility:hidden" wrap="off"></textarea>
<input type="hidden" id="action" name="action" value="">
<input type="hidden" name="outfit" value="45">
</form></div>
</body></html>