By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,776 Members | 1,292 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,776 IT Pros & Developers. It's quick & easy.

Internet Explorer, createElement and draggable boxes

P: n/a
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>
Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
http://walterzorn.com has a mature draggable div/img library.
Perhaps that might give you an idea.

Csaba Gabor from Vienna

"louissan" <lo******@caramail.com> wrote in message news:3b*************************@posting.google.co m...
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>

Jul 23 '05 #2

P: n/a


louissan wrote:

boxheader.setAttribute("onmousedown","dragStart(ev ent,'" + 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);
};

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.