[SOLVED] Help with drag and drop function - move elements manually.

[MadnessRed]

ok, I am making a live chess page which allows 2 users to play chess over the internet. I am using the walterzorn drag drop library to allo wmovement of the peices.

 

When I user moves a peice the script detects the movement and sends the movement to the game via ajax and the game registers the move. And if its legal adds it to the database.

 

Now when the move is made the moves in the database is increased by one, an simple ajax script which runs every 0.5 seconds sends the current move of the client to the game and the php compares with the move inte the database and return 1 or 0 depending on weather the move is differmt, eg the new position of peices must be loaded.

 

After the data has been got by ajax, the js run a script which basically sees if 1 or 0 was returned and if 0 was returned it runs another ajax query to fetch the new positions. These positions are given in terms of x and y and represent the absolute position of the peices. The javascript then simply moves the relevant peices to that square.

 

Its all good up to which point, (if it wasn't this would be in the ajax section but as the ajax works perfectly I am puttin it under javascript).

 

The problem is that when the peices are moved. the wz_dragdrop.js file does not seem to recognise the movent, meaning that the peie in question is not draggable. However if you click ont the square the peice moved from it is dragable, and the peice jumps to that square.

 

---------

 

What I would like it someone who knows the wz_dragdrop library who knows if there is a way to move an element using javascript that dragdrop will recognise.

 

atm my script does this.

document.getElementById(n+'.dIi15v').style.left = document.getElementById('xpos'+n).value+'px';

document.getElementById(n+'.dIi15v').style.top  = document.getElementById('ypos'+n).value+'px';

 

which physically moves the peices but dragdrop doesn't notic the movement.

 

any help would be great as I am not that good with javascript and this one is reaslly beyond me.  I though it would be as smle as finding a variable in the wz script which carries the x and y pos for each element but it doesn't appear so.

 

Many thanks

 

MadnessRed

[MadnessRed]

im getting somewhere,

 

				for(x = 0; x < dd.elements.length; x++){
				if(dd.elements[x].name == n + '.'){
					xpos = Math.ceil(document.getElementById('xpos'+n).value * 1 + 8.0);
					ypos = Math.ceil(document.getElementById('ypos'+n).value * 1 + 8.0);
					//alert(dd.elements[x].y + '=' + ypos);
					dd.elements[x].x = xpos;
					dd.elements[x].y = ypos;
				}
			}

 

Now the clickable thing it on the right square, only problem now is the the peice jump back to the square it was on when you started dragging, then hovers below the mouse.

[MadnessRed]

ok, I solved it, for the sake of anyone else with this problem here is my solution.

 

				document.getElementById(n+'.dIi15v').style.left = document.getElementById('xpos'+n).value+'px';
			document.getElementById(n+'.dIi15v').style.top  = document.getElementById('ypos'+n).value+'px';

			for(x = 0; x < dd.elements.length; x++){
				if(dd.elements[x].name == n + '.'){
					xpos = Math.ceil(document.getElementById('xpos'+n).value * 1 + 8.0);
					ypos = Math.ceil(document.getElementById('ypos'+n).value * 1 + 8.0);
					//alert(dd.elements[x].y + '=' + ypos);
					dd.elements[x].x = xpos;
					dd.elements[x].y = ypos;
					dd.elements[x].cssx = xpos;
					dd.elements[x].cssy = ypos;
					dd.elements[x].defx = xpos;
					dd.elements[x].defy = ypos;
				}
			}
			document.getElementById(n+'.dIi15v').style.zIndex = '1';