Hi all,
I have a slight problem with IE, when everything works with firefox.
The goal is to _create_ boxes using the createElement method. And then
making it draggable with the mouse. The code example below is still
very temporary, but I could not get IE to drag the created box, when
firefox does it without problem.
Any hints? :)
The drag n' drop is straight from brainjar.com. Since their code works
for hidden/shown divs, I guess it all has to come from IE's lack of
DOM support and problems with it and the used method? Is there any
solution around this problem?
I'd really like to avoid turning boxes on/off (ie, block/hidden or
visible/invisible) because the potential number of them being present
in the future page can be enormous. The advantage of the createElement
method is that it allows for light pages and a lot of client-side
treatment.
Anyway, here's the code :)
<html>
<head>
<script type="text/javascript" language="javascript">
function Browser() {
var ua, s, i;
this.isIE = false;
this.isNS = false;
this.version = null;
ua = navigator.userAgent;
s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
// Treat any other "Gecko" browser as NS 6.1.
s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}
var browser = new Browser();
function activatebox(id,posx,posy,width,height,title,src) {
var mainid = document.getElementById("main");
var boxid = "box" + id;
var myboxstyle = "left:" + posx + ";top:" + posy + ";width:" + width
+ "px;height:" + height + "px";
var myheaderstyle = "";
var myframestyle = "width:" + width + "px;height:" + height + "px;";
if (document.getElementById(boxid)) {
//z-index max
}
else {
mybox = document.createElement("div");
mybox.setAttribute("id",boxid);
mybox.className = "box";
if (browser.isIE) {
mybox.style.posLeft = posx;
mybox.style.posTop = posy;
mybox.style.height = height;
mybox.style.width = width;
}
else {
mybox.setAttribute("style",myboxstyle);
}
mainid.appendChild(mybox);
boxheader = document.createElement("div");
boxheader.className = "boxheader";
boxheader.setAttribute("id","boxheader" + id);
if (browser.isIE) {
boxheader.style.posLeft = "";
}
else {
boxheader.setAttribute("style",myheaderstyle);
}
boxheader.setAttribute("onmousedown","dragStart(ev ent,'" + boxid +
"')");
headertext = document.createTextNode(title);
boxheader.appendChild(headertext);
mybox.appendChild(boxheader);
boxframe = document.createElement("iframe");
boxframe.className = "boxframe";
boxframe.setAttribute("id","boxframe" + id);
boxframe.setAttribute("src",src);
boxframe.setAttribute("frameborder","0");
boxframe.setAttribute("framespacing","0");
boxframe.setAttribute("marginheight","0");
boxframe.setAttribute("marginwidth","0");
if (browser.isIE) {
boxframe.style.width = width;
boxframe.style.height = height;
}
else {
boxframe.setAttribute("style",myframestyle);
}
mybox.appendChild(boxframe);
}
}
// from www.brainjar.com
var dragObj = new Object();
dragObj.zIndex = 0;
function dragStart(event, id) {
var el;
var x, y;
if (id)
dragObj.elNode = document.getElementById(id);
else {
if (browser.isIE)
dragObj.elNode = window.event.srcElement;
if (browser.isNS)
dragObj.elNode = event.target;
// If this is a text node, use its parent element.
if (dragObj.elNode.nodeType == 3)
dragObj.elNode = dragObj.elNode.parentNode;
}
// Get cursor position with respect to the page.
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
// Save starting positions of cursor and element.
dragObj.cursorStartX = x;
dragObj.cursorStartY = y;
dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10);
dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10);
if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0;
// Update element's z-index.
dragObj.elNode.style.zIndex = ++dragObj.zIndex;
// Capture mousemove and mouseup events on the page.
if (browser.isIE) {
document.attachEvent("onmousemove", dragGo);
document.attachEvent("onmouseup", dragStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("mousemove", dragGo, true);
document.addEventListener("mouseup", dragStop, true);
event.preventDefault();
}
}
function dragGo(event) {
var x, y;
// Get cursor position with respect to the page.
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
// Move drag element by the same amount the cursor has moved.
dragObj.elNode.style.left = (dragObj.elStartLeft + x -
dragObj.cursorStartX) + "px";
dragObj.elNode.style.top = (dragObj.elStartTop + y -
dragObj.cursorStartY) + "px";
if (browser.isIE) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS)
event.preventDefault();
}
function dragStop(event) {
// Stop capturing mousemove and mouseup events.
if (browser.isIE) {
document.detachEvent("onmousemove", dragGo);
document.detachEvent("onmouseup", dragStop);
}
if (browser.isNS) {
document.removeEventListener("mousemove", dragGo, true);
document.removeEventListener("mouseup", dragStop, true);
}
}
</script>
<link rel="stylesheet" href="gen.css" type="text/css"
media="all"></link>
</head>
<body>
<a href="#" onclick="javascript:activatebox(2,100,150,160,430, 'title2','myframesrc');">create
box en haut à gauche</a>
<div id="main">
<center>
<table border="0" cellspacing="0" cellpadding="0"
style="width:640px;margin:40px 0 0 0">
<tr>
<td width="100%" align="center">
<img src="centernav.jpg" id="centernav">
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
