Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts

    drag'n'drop problem

    If I give my object (a div) initially an absolute position, no problem, but when I nest it in a parent table/another div, it's Xposition seems to go away... Any ideeas, please?:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script language="JavaScript" type="text/JavaScript">
    var 
    mx;var my;var dx; var oX; var oY; var dy;var q;
    function 
    mouseP(d,e){
    // mouse pos 
    mx 0;my 0;
    if(!
    e){var window.event;}//IE
    if(e.pageX || e.pageY){//IE
    mx e.pageX;
    my e.pageY;
    }
    else if(
    e.clientX || e.clientY){//Moz
    mx e.clientX;
    my e.clientY;
    }
    if(
    q==0){findP(d);}//find the obj pos
    //drag the obj
    d.style.position='absolute';
    d.style.left=(mx-dx)+'px';
    d.style.top=(my-dy)+'px';
    document.getElementById('txt').innerHTML oX+' | '+mx;//shows some values... to be deleted later
    }
    function 
    dragD(d,e){//drag
    q=0;//reinitialize the parameter
    document.getElementsByTagName('body')[0].onmousemove=function(){mouseP(d,e)}
    }
    function 
    dropD(d){//drop
    document.getElementsByTagName('body')[0].onmousemove=function(){}//stop the movement
    findP(d);//find the new obj position
    }
    function 
    findP(d){//obj absolute position
    oX d.offsetLeft;oY d.offsetTop;
    while(
    d.parentNode){
    oX=oX+d.parentNode.offsetLeft;
    oY=oY+d.parentNode.offsetTop;
    if(
    d==document.getElementsByTagName('body')[0]){break;}
    else{
    d=d.parentNode;}
    }
    //calculate the initial diference posmouse - posobj
    dx=mx-parseInt(oX);
    dy=my-parseInt(oY);
    q++;//change the paramater to avoid continuous calculation
    }
    </script>
    <style type="text/css">
    <!--
    body {
        margin-top: 0px;
        margin-left: 0px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="base"></div>
    <div id="over" style="position:absolute;left:400px;top:20px">
    <table width="400" border="0" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC">
    <tr>
    <td><div style="cursor:pointer;width:50px;height:50px;background-color:#ff0000" onmousedown="dragD(this,event)" onmouseup="dropD(this)">&nbsp;</div></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </div>
    <div id="txt"></div>
    </body>
    </html> 
    here's the variant with the object "unnested". It works like that... hm
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script language="JavaScript" type="text/JavaScript">
    var 
    mx;var my;var dx; var oX; var oY; var dy;var q;
    function 
    mouseP(d,e){
    // mouse pos 
    mx 0;my 0;
    if(!
    e){var window.event;}//IE
    if(e.pageX || e.pageY){//IE
    mx e.pageX;
    my e.pageY;
    }
    else if(
    e.clientX || e.clientY){//Moz
    mx e.clientX;
    my e.clientY;
    }
    if(
    q==0){findP(d);}//find the obj pos
    //drag the obj
    d.style.position='absolute';
    d.style.left=(mx-dx)+'px';
    d.style.top=(my-dy)+'px';
    document.getElementById('txt').innerHTML oX+' | '+mx;//shows some values... to be deleted later
    }
    function 
    dragD(d,e){//drag
    q=0;//reinitialize the parameter
    document.getElementsByTagName('body')[0].onmousemove=function(){mouseP(d,e)}
    }
    function 
    dropD(d){//drop
    document.getElementsByTagName('body')[0].onmousemove=function(){}//stop the movement
    findP(d);//find the new obj position
    }
    function 
    findP(d){//obj absolute position
    oX d.offsetLeft;oY d.offsetTop;
    while(
    d.parentNode){
    oX=oX+d.parentNode.offsetLeft;
    oY=oY+d.parentNode.offsetTop;
    if(
    d==document.getElementsByTagName('body')[0]){break;}
    else{
    d=d.parentNode;}
    }
    //calculate the initial diference posmouse - posobj
    dx=mx-parseInt(oX);
    dy=my-parseInt(oY);
    q++;//change the paramater to avoid continuous calculation
    }
    </script>
    <style type="text/css">
    <!--
    body {
        margin-top: 0px;
        margin-left: 0px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="base"></div>
    <div style="cursor:pointer;width:50px;height:50px;background-color:#ff0000" onmousedown="dragD(this,event)" onmouseup="dropD(this)">&nbsp;</div>
    </div>
    <div id="txt"></div>
    </body>
    </html> 
    Last edited by Kor; 03-15-2005 at 04:26 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor
    If I give my object (a div) initially an absolute position, no problem, but when I nest it in a parent table/another div, it's Xposition seems to go away... Any ideeas, please?
    yeah, your positioned objects co-ordinates are always relative to the containing object. so you have to find out the co-ordinates of the container and all the way up the tree.
    *keep it simple (TM)

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    But I have did that with the findP() function... or I have build it in a wrong way?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor
    But I have did that with the findP() function... or I have build it in a wrong way?
    no, not quite, because findP() get's the offset values which are always in relation to the container, not the page.
    *keep it simple (TM)

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I know... this is whay i build the function to go up the tree and add all the parents offsets, like

    function findP(d){
    oX = d.offsetLeft;oY = d.offsetTop;
    while(d.parentNode){
    oX=oX+d.parentNode.offsetLeft;
    oY=oY+d.parentNode.offsetTop;
    if(d==document.getElementsByTagName('body')[0]){break;}
    else{d=d.parentNode;}
    }
    }
    }

    Or is this function wrong? It looks ok to me...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No that's right, but if the element you're appending is not at the document context, and the context (or its parent(s)) has positioning, then its absolute 0,0 is not the top of the document.

    What you need to do is check for that - as you iterate upwards, look for relative or absolute positioning at each level (from computed style) and stop at that context if it's being used.

    I actually need a function to do just that ... but I've been busy with other things. If you wait long enough I'll provide you with the solution ... but if you felt like doing likewise, I wouldn't complain
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay it looks like I beat you to it Here's the solution:
    Code:
    //get the position of an object
    function getPosition(obj, dir)
    {	
    	//identify supported computed style object
    	var computed = typeof document.defaultView != 'undefined' && typeof document.defaultView.getComputedStyle != 'undefined' ? 'computed' : typeof document.getElementsByTagName('body')[0].currentStyle != 'undefined' ? 'current' : 'none';
    
    	//get x or y position
    	var pos = dir == 'x' ? obj.offsetLeft : obj.offsetTop;
    
    	//store offset parent
    	var tmp = obj.offsetParent;
    	
     	//get computed style position of offset parent
    	var position = computed == 'computed' ? document.defaultView.getComputedStyle(tmp, '').getPropertyValue('position') : computed == 'current' ? tmp.currentStyle.position : '';
    	
    	//while offset parent exists and doesn't have relative or absolute positioning
    	while(tmp != null && !/^(relative|absolute)/.test(position))
    	{
    		//add the offset from its parent
    		pos += dir == 'x' ? tmp.offsetLeft : tmp.offsetTop;
    
    		//set reference upwards
    		tmp = tmp.offsetParent;
    	}
    
    	//return the position
    	return pos;
    };
    But you'll note that it absolutely relies on a way to read the computed style. That "computed" variable should actually be declared at initialisation, and then don't run the rest of the script at all if it comes back as "none" ... unfortunately that means you'll lose Safari (and older opera builds, earlier than 7.5)

    But it can't be helped - it's either that, or the application can't support being used in this way.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    well hm... You say I have to search first at all if parent(s) has(have) a CSS position. If not, get the offset position... But I was used to think that offsetTop and offsetLeft would have return the relative position nomatter of the CSS...

    On the other hand I have used my piece of code succesfully in many other occasions and it looks ok, except for this drag'n'drop application....
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Now, with a much clear mind this morning I have noticed that my code for finding the absolute postion of the element was ok, except that, for weird resons the line:

    d.style.position='absolute';

    has no effect, thus the position remains still relative. I don't sense why...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I have manage to solve it by substracting the parents' offset from the element position, first drag, and reset those offset values to 0 next dragging, but it is no use, as the final position of the element remains relative to the parent, or I need to superimpose the element in another's table cell and compare the position.

    I guess I will give up working with nested dragable elements and set them all from the very beggining as independent absolute positioned elements...

    I knew from the begining I will arrive here...

    Tx all for the help... It still remains a mistery for me how to switch an element's position from relative to absolute....
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #11
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [ot]

    As far as I can tell, dragDrop is completely retarded in any browser that lacks mouse-capture capabilities...
    *this message will self destruct in n-seconds*

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by codegoboom
    As far as I can tell, dragDrop is completely retarded in any browser that lacks mouse-capture capabilities...
    Not necessarily - I have the first rumblings of key-accessible drag n drop in the works -- http://www.brothercake.com/scripts/dbx/dbx.html [tab to the arrow symbols of the purple column and press an up or down arrow ..]

    It has issues, because it's not finished, but it demonstrates the basic point - drag and drop applications can be extended to the keyboard.

    Quote Originally Posted by Kor
    Tx all for the help... It still remains a mistery for me how to switch an element's position from relative to absolute....
    Have a look at my code -- http://www.brothercake.com/scripts/dbx/dbx.js - I never change the positioning of the original objects... in fact I barely touch them at all ...
    Last edited by brothercake; 03-17-2005 at 01:51 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #13
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by brothercake
    Not necessarily - I have the first rumblings of key-accessible drag n drop in the works...
    ooh, waddya' call that... "touch n' toss", "key n' kick"?

    ... good idea, though
    Last edited by codegoboom; 03-16-2005 at 12:48 PM. Reason: brainstorming...
    *this message will self destruct in n-seconds*

  • #14
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    er ... "press 'n' move" maybe?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #15
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    type 'n' toddle ... ahem, that's enuff of that.
    *keep it simple (TM)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •