Internet Explorer, createElement and draggable boxes

Discussion in 'Javascript' started by louissan, Mar 24, 2005.

  1. louissan

    louissan Guest

    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>
     
    louissan, Mar 24, 2005
    #1
    1. Advertising

  2. louissan

    Csaba2000 Guest

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

    Csaba Gabor from Vienna

    "louissan" <> wrote in message news:...
    > 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>
     
    Csaba2000, Mar 24, 2005
    #2
    1. Advertising

  3. 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);
    };

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Mar 24, 2005
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. cmay
    Replies:
    0
    Views:
    1,153
  2. Stefan Mueller
    Replies:
    5
    Views:
    12,447
    jamesxa
    Jun 16, 2009
  3. Ed Hauptman
    Replies:
    7
    Views:
    1,045
    Ed Hauptman
    Aug 7, 2009
  4. John Smith
    Replies:
    1
    Views:
    156
    Evertjan.
    Mar 12, 2005
  5. Replies:
    2
    Views:
    142
Loading...

Share This Page