Internet Explorer, createElement and draggable boxes

L

louissan

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(event,'" + 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>
 
M

Martin Honnen

louissan wrote:

boxheader.setAttribute("onmousedown","dragStart(event,'" + boxid +
"')");

That is not going to work across browsers, you are better off scripting
the onmousedown property as an object e.g.
boxheader.onmousedown = function (evt) {
dragStart(evt || window.event, boxid);
};
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top