...

View Full Version : drag'n'drop problem



Kor
03-15-2005, 04:20 PM
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?:


<!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 e = 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


<!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 e = 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>

jbot
03-15-2005, 04:24 PM
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.

Kor
03-15-2005, 04:34 PM
But I have did that with the findP() function... or I have build it in a wrong way?

jbot
03-15-2005, 04:47 PM
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.

Kor
03-15-2005, 05:00 PM
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...

brothercake
03-15-2005, 05:51 PM
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 :D

brothercake
03-15-2005, 10:04 PM
Okay it looks like I beat you to it :) Here's the solution:


//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.

Kor
03-16-2005, 08:58 AM
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
03-16-2005, 09:18 AM
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
03-16-2005, 09:54 AM
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... :D

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

codegoboom
03-16-2005, 10:33 AM
As far as I can tell, dragDrop is completely retarded in any browser that lacks mouse-capture capabilities... ;)

brothercake
03-16-2005, 12:26 PM
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.


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 ...

codegoboom
03-16-2005, 12:36 PM
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"? :D


... good idea, though :)

brothercake
03-16-2005, 03:57 PM
er ... "press 'n' move" maybe? :D

jbot
03-16-2005, 04:54 PM
type 'n' toddle ... ahem, that's enuff of that.

codegoboom
03-16-2005, 05:43 PM
Wait! :p [pound n place, tap n track, stick n step, lean n leap...]

Kor
03-17-2005, 07:49 AM
Ok kids, game over... Let's turn to something seroius, if you don't mind... I need your help.

so... I have manage to overpass the position problem, but here's another one.

In fact not the drag'n'drop functions work bad (at least they were working ok on earlier stages of my project). But I need either to superimpose the images over a cell, and when the superimpose is quite good, to "auto" move the picture, onmouseup, to fit exactly over that cell. So that I needed to return the exact position of the cells as well. This was done, with your help, thak you

So far so good, at least in Moz.

Noe here's the problem with IE. After I have made some changes and build some "show the real position" functions, in IE I have to click twice to start the onmousemove and onmouseup eventhandlers, and I confess I don't know why this happends...

(see also attachment)


<!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">
<style type="text/css">
<!--
body {
margin-top: 0px;

margin-left: 0px;
}
.cel {
background-color: #CCCCCC;
height: 50px;
}
.ima {
cursor:pointer;
position:absolute;
}
-->
</style>
<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 e = 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){findD(d);}//find the element's position
//drag the object
d.style.left=(mx-dx)+'px';
d.style.top=(my-dy)+'px';
}
function dragD(d,e){//drag start
q=0;//reinitialize the param for a new drag
document.getElementsByTagName('body')[0].onmousemove=function(){mouseP(d,e)}//go to main function
}
function dropD(d){//drop
document.getElementsByTagName('body')[0].onmousemove=function(){}//stop(drop)
findD(d);//store the new element's position
blockD(d);//put the element exactly on the cell (this function is not entirely built yet)
}
function blockD(d){
ver();//temporary - shows some values
}
function findD(d){//find the positions diference obj-mouse
oX = d.offsetLeft;oY = d.offsetTop;
dx=mx-oX;
dy=my-oY;
q++;//increment the param for avoiding a continous firing of this function
}
var cX=new Array()
var cY=new Array()
function findC(){
var c = document.getElementById('base').getElementsByTagName('td');
for(var i=0;i<bRows*bCols;i++){
cX[i] = c[i].offsetLeft;cY[i] = c[i].offsetTop;
checkParent(c[i],cX[i],cY[i])
cX[i]=x;cY[i]=y;
}
//setIma();
}
function checkParent(obj,x,y){
while(obj.offsetParent){
if(obj==document.getElementsByTagName('body')[0]){break;}
else{
x=x+obj.offsetParent.offsetLeft;
y=y+obj.offsetParent.offsetTop;
obj=obj.offsetParent;
}
}
this.x = x;this.y=y;
return this.x;
return this.y;
}
var bRows = 2;//rows for the table
var bCols = 3;//cols for the table
function createE(r,c,id){//creates a table
var w=0;
var root=document.getElementById(id);
var oTabe = document.createElement('table');
oTabe.setAttribute('width',150)
var oTbod=document.createElement('tbody');
for(var i=0;i<r;i++){
var oRow = document.createElement('tr');
for(var j=0;j<c;j++){
var oCell = document.createElement('td');
oCell.className='cel';
oCell.appendChild(document.createTextNode(w));
oRow.appendChild(oCell);w++
}
oTbod.appendChild(oRow);
}
oTabe.appendChild(oTbod)
root.appendChild(oTabe);
findC()
}
var relX=200;//x diference to the container
var relY=20;//y diference to the container
var nrC = 2;//nr cols for the images - not important now - to be develop later

function setIma(){// not important at this stage, to be develop later
var root=document.getElementById('container');
var rootx = root.offsetLeft;var rooty = root.offsetTop;
checkParent(root,rootx,rooty);
rootx=x+relX;rooty=y+relY;
var allIma = document.getElementsByTagName('img');
var k=0;
var oIma = new Array()
for(var i=0;i<allIma.length;i++){
if(allIma[i].className=='ima'){
oIma[k]=allIma[i];k++
}
}
//for(var i=0;i<oIma.length;i++){
//}
}

function ver(){//temporary function - shows some values
var cell0 = cX[0];//first cell's xpos
document.getElementById('txt').innerHTML='cell Xpos = '+cell0+'<br>'+'obj Xpos = '+oX;
}
onload=function(){createE(bRows,bCols,'base')}
</script>
</head>
<body><br>
<br>
<br>
<br>

<table id="container" align="center" width="400">
<tbody>
<tr>
<td>
<div id="base" style="width:400px"></div>
<div id="txt"></div>
</div>
</td>
</tr>
</tbody>
</table>
<img src="0.jpg" class="ima" onmousedown="dragD(this,event)" onmouseup="dropD(this)">
<img src="1.jpg" class="ima" onmousedown="dragD(this,event)" onmouseup="dropD(this)">
<img src="2.jpg" class="ima" onmousedown="dragD(this,event)" onmouseup="dropD(this)">
<img src="3.jpg" class="ima" onmousedown="dragD(this,event)" onmouseup="dropD(this)">
<img src="4.jpg" class="ima" onmousedown="dragD(this,event)" onmouseup="dropD(this)">
</body>
</html>

Kor
03-17-2005, 09:34 AM
ok I refined, isolated and simplified the problem.
The ideea is that, if I use a div, the drag'n'drop works with no problem. When I use an image, the problem accures (mainly in IE, the drag is blocked and i need a second click to start onmousedows si onmouseup.


Any ideea why this happens? Look:


<!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">
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-left: 0px;
}
.ima {
cursor:pointer;
position:absolute;
left:50px;
top:100px;
width:50px;
height:50px;
background-color:#FF0000;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
var mx;var my;var dx; var oX; var oY; var dy;var q;
function mouseP(d,e){
// capture mouse pos
mx = 0;my = 0;
if(!e){var e = window.event;}
if(e.pageX || e.pageY){
mx = e.pageX;
my = e.pageY;
}
else if(e.clientX || e.clientY){
mx = e.clientX;
my = e.clientY;
}
if(q==0){findP(d);}//check the position
//drag
d.style.left=(mx-dx)+'px';
d.style.top=(my-dy)+'px';
}
function dragD(d,e){//drag
q=0;//
document.getElementsByTagName('body')[0].onmousemove=function(){mouseP(d,e)}
}
function dropD(d){//drop
document.getElementsByTagName('body')[0].onmousemove=function(){}
findP(d)
}
function findP(d){//object position
oX = d.offsetLeft;
oY = d.offsetTop;

//difference mouse pos - obj pos
dx=mx-oX;
dy=my-oY;
q++;//increment for avoid repeat the function during movement
}
</script>
</head>
<body>
<div class="ima" onmousedown="dragD(this,event)" onmouseup="dropD(this)"></div>
</body>
</html>


Now, when changing the div with a picture (or nest the picture inside the div) problem occures...


:confused:

brothercake
03-17-2005, 11:16 AM
Yeah I've had this problem too :D

The deal is that images have drag drop behaviors already, implemented by the browser - in some you can drag images to the desktop or an image application, in others you can drag it to the bookmarks or tab bar ... it varies. The point is that it conflicts with drag drop behaviors you script for, and afaik there's nothing you can do to prevent that conflict, you just have to impose a design limitation - draggable elements cannot be images.

What I did when I was hit by this specific problem is replace the IMG with a SPAN and background-image. That may not be appropriate - depends whether the image is content - but failing that you should be good if you just surround the IMG with another element, and drag that (but not a link ... links may have the same problem as images)

btw - did you look at the code I linked to? Maybe it's too late at this stage of your development, but the crux I was getting it as that a lot of styling and positioning problems can be overcome if you don't try to move the original object - clone it, and have the clone be what apparently moves. Then when you let go you can just delete the clone, and implement snap to grid with insertBefore. This means virtually no design restrictions anywhere :thumbsup:

Kor
03-17-2005, 11:23 AM
Well hm... I am glad to say that, with a little help from one of friend in another forum I have solved the problem, so that no need to span/bgimage...

Here's the solution (another way of capturing the events) - it is a start for a more complex projuect so jump over the createElements function -:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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">
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-left: 0px;
}
.ima {
cursor:pointer;
position:absolute;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
var mx;var my;var dx; var oX; var oY; var dy;var q;
var iWidth = 50;//latimea imaginii
var iHeight = 50;//inaltimea imaginii
var bRows = 2;//nr.randuri tabel
var bCols = 3;//nr.coloane tabel
var cellP = 2;//cellpadding
var cellC = '#CCCCCC';//culoare bg celule
var bWidth = (bCols*iWidth)+((bCols+1)*cellP);
function createE(r,c,id){//creates a table
var w=0;
var root=document.getElementById(id);
var oTabe = document.createElement('table');
oTabe.setAttribute('width',bWidth);
oTabe.setAttribute('border',0);
oTabe.setAttribute('cellPadding',2);
var oTbod=document.createElement('tbody');
for(var i=0;i<r;i++){
var oRow = document.createElement('tr');
for(var j=0;j<c;j++){
var oCell = document.createElement('td');
oCell.style.backgroundColor=cellC;
oCell.style.height=iHeight+'px';
//oCell.className='cel';
oCell.appendChild(document.createTextNode(w));
oRow.appendChild(oCell);w++
}
oTbod.appendChild(oRow);
}
oTabe.appendChild(oTbod)
root.appendChild(oTabe);
findC()
}
function ver(){//temporary function - shows some values
var cell0 = cX[0];//first cell's xpos
document.getElementById('txt').innerHTML='cell Xpos = '+cell0+'<br>'+'obj Xpos = '+xN;
}
var cX=new Array()
var cY=new Array()
function findC(){
var c = document.getElementById('base').getElementsByTagName('td');
for(var i=0;i<bRows*bCols;i++){
cX[i] = c[i].offsetLeft;cY[i] = c[i].offsetTop;
checkParent(c[i],cX[i],cY[i])
cX[i]=x;cY[i]=y;
}
//setIma();
}
function checkParent(obj,x,y){
while(obj.offsetParent){
if(obj==document.getElementsByTagName('body')[0]){break;}
else{
x=x+obj.offsetParent.offsetLeft;
y=y+obj.offsetParent.offsetTop;
obj=obj.offsetParent;
}
}
this.x = x;this.y=y;
return this.x;
return this.y;
}

var ie4=document.all
var dom=document.getElementById&&!document.all
var dragV=0
function dragIt(e){
if ((ie4&&sDrag)||(navigator.userAgent.indexOf("Opera")!=-1&&sDrag)){
xN=mX+event.clientX-offsetx;
yN=mY+event.clientY-offsety;
cont.style.left=xN;
cont.style.top=yN;
return false
}
else if (dom&&sDrag){
xN=mX+e.clientX-offsetx
yN=mY+e.clientY-offsety
cont.style.left=xN;
cont.style.top=yN;
return false
}
ver();//temporary - shows some values
}
function initDrag(e){
//cont=dom? document.getElementById("container0"):document.all.container0
var dragI=dom?e.target:event.srcElement
if(dragI.id.indexOf("img")>-1){
cont=dragI
offsetx=ie4?event.clientX:e.clientX
offsety=ie4?event.clientY:e.clientY
//mX=parseInt(cont.style.left)
//mY=parseInt(cont.style.top)
mX=cont.offsetLeft
mY=cont.offsetTop
sDrag=true
document.onmousemove=dragIt
}
}
document.onmousedown=initDrag
document.onmouseup=new Function("sDrag=false")
onload=function(){createE(bRows,bCols,'base')}
//-->
</script>
</head>
<body>
<br>
<br>
<br>
<br>

<table id="container" align="center" width="400">
<tbody>
<tr>
<td>
<div id="base" style="width:400px"></div>
<div id="txt"></div>
</div>
</td>
</tr>
</tbody>
</table>
<img src="0.jpg" class="ima" onmousedown="dragV=1;" onmouseup="dragV=0" id="img0">
<img src="1.jpg" class="ima" onmousedown="dragV=1;" onmouseup="dragV=0" id="img1">
<img src="2.jpg" class="ima" onmousedown="dragV=1;" onmouseup="dragV=0" id="img2">
<img src="3.jpg" class="ima" onmousedown="dragV=1;" onmouseup="dragV=0" id="img3">
<img src="4.jpg" class="ima" onmousedown="dragV=1;" onmouseup="dragV=0" id="img4">
<img src="5.jpg" class="ima" onmousedown="dragV=1;" onmouseup="dragV=0" id="img5">
</body>
</html>


...edit...
Brilliant ideea with the clone, tx! I realy need it, as the final purpose is to let the client fill a great squared area with some predefined small squares, and he might need to use an image more than once...

brothercake
03-17-2005, 11:43 AM
Cool :)

btw - you can often save code by unifying the event reference, eg:


if(!e) { e = window.event; }

offsetx = e.clientX;

and that way you don't even need a browser variable

Kor
03-17-2005, 11:54 AM
So I'll do, yes tx... But first I have to go further (build a "magnetic block" to put the image exactly over the square when relatively near, than return the ids of the pictures and the index of the corespondent overimposed cells to a server-side application and a DB), but all these are piece of cake now...

Thanks all for steping by and help me. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum