ncoo
asked on
Obeject ID Alert
I'm trying to create an alert message when two objects are dragged in to the same position, I've set up a site with different areas with different ids
eg <td id="main"> </td> or <td id="subleft"> </td> etc
the site also uses coords (x,y) for each position, I'm not sure which is easier to use, so I included them both when designing it.
There are multiple moving objects all with different names
eg
<div id="redcar" style="position:absolute;l
<img src="redcar.jpg" id="redcar01" alt="Drive Me!" width="80" height="50">
</div>
bluecar, yellowcar etc
Also if two cars are placed in the same position after the alert is displayed informing the users of it the car placed on top of the other one needs to return to it's previous position.
eg <td id="main"> </td> or <td id="subleft"> </td> etc
the site also uses coords (x,y) for each position, I'm not sure which is easier to use, so I included them both when designing it.
There are multiple moving objects all with different names
eg
<div id="redcar" style="position:absolute;l
<img src="redcar.jpg" id="redcar01" alt="Drive Me!" width="80" height="50">
</div>
bluecar, yellowcar etc
Also if two cars are placed in the same position after the alert is displayed informing the users of it the car placed on top of the other one needs to return to it's previous position.
You need "collision detection". Here's simple approach: http://www.devx.com/tips/Tip/12928
ASKER
Thanks but I can't get the script to work at all, also it doesn't contain a return to previous position if collision is detected.
>I can't get the script to work at all
You mean it throws errors or it doens't do what you want? Post your adaptation.
>also it doesn't contain a return to previous position if collision is detected
Don't know how you have your code set up but it in broad outline you will have something like this:
var oMovingObject = ...
var oStaticObject = ....
//Save the origianl position somewhere:
var nMovingObjectOrigLeft = oMovingObject.style.posLef
var nMovingObjectOrigTop = oMovingObject.style.posTop
<...oMovingObject changes position...>
if (...collision detected between oMovingObject and oStaticObject...) {
//restore oMovingObject to origianl position:
oMovingObject.style.posLef
oMovingObject.style.posTop
}
You mean it throws errors or it doens't do what you want? Post your adaptation.
>also it doesn't contain a return to previous position if collision is detected
Don't know how you have your code set up but it in broad outline you will have something like this:
var oMovingObject = ...
var oStaticObject = ....
//Save the origianl position somewhere:
var nMovingObjectOrigLeft = oMovingObject.style.posLef
var nMovingObjectOrigTop = oMovingObject.style.posTop
<...oMovingObject changes position...>
if (...collision detected between oMovingObject and oStaticObject...) {
//restore oMovingObject to origianl position:
oMovingObject.style.posLef
oMovingObject.style.posTop
}
ASKER
The script is just skipped or it never is called, no error
document.onmouseup = MouseClickUp;
document.onmousedown = MouseClickDown;
document.onmousemove = MouseMovement;
I've been putting the script in to the MouseClickUp Function does that help at all?
document.onmouseup = MouseClickUp;
document.onmousedown = MouseClickDown;
document.onmousemove = MouseMovement;
I've been putting the script in to the MouseClickUp Function does that help at all?
Post the full script you have.
ASKER
if (copyobject.id)
{
var TempStoreX=0;
var TempStoreY=0;
TempStoreX = copyobject.parentElement.s
TempStoreY = copyobject.parentElement.s
document.Show.CurrentTempS
document.Show.CurrentTempS
}
thats the piece of script I'm using to get the X and Y values of the piece being dropped on the page
TempStoreX and TempStoreY.
copyobject.id is the object being moved
The hole script is about 15kb and is bit of a mess, I normally tidy up when i finish.
}
>I normally tidy up when i finish
Ouch! I do the opposite: I keep it tidy all the way through, otherwise, as I have foundout to my cost on several occasions, you can end up doing a lot more work than you needed to. Keeping it tidy from the start makes it so much easier to update, debug, understand.
What's the target object (the one that doesn't move)?
To check if the script ie being called, put and alert('onmouseup') as the first thing in your mouseup handler. If the alert doesn't come up then you object is not getting the event. If it does come up, then add alerts further down the code to find out at what stage it is not getting called.
Ouch! I do the opposite: I keep it tidy all the way through, otherwise, as I have foundout to my cost on several occasions, you can end up doing a lot more work than you needed to. Keeping it tidy from the start makes it so much easier to update, debug, understand.
What's the target object (the one that doesn't move)?
To check if the script ie being called, put and alert('onmouseup') as the first thing in your mouseup handler. If the alert doesn't come up then you object is not getting the event. If it does come up, then add alerts further down the code to find out at what stage it is not getting called.
ASKER
I know is a bad habbit if it was tidy from the start there would probably be a nice tidy solution but as it is, it's a mess.
>What's the target object (the one that doesn't move)?
All objects are moving so the target is any other object that can be moved and dropped.
I'll give that alert('onmouseup') a try thanks
>What's the target object (the one that doesn't move)?
All objects are moving so the target is any other object that can be moved and dropped.
I'll give that alert('onmouseup') a try thanks
ASKER
Sorry said that wrong the object being moved are moved in to table cells and it's these table cells which can only contain one moved object and if a second object is moved in to the table cell then it does the alert and moves the object back.
ASKER
Anyone?
ncoo,
>the object being moved are moved in to table cells and it's these table cells which can only contain one moved object and if a second object is moved in to the table cell then it does the alert and moves the object back.
That's compleltey different. You don't need to track positions etc. You can just use mouseover/mouseout/onclick
Presumably you click on cell A to pick up it's contents. At that stage you save a variable to say what object (or cell) the item is from (that could just be the reference to the cell object). Whne you move over another cell, you record what cell that is. If you le go over a cell, then check what's in it and cancel if it's not empty.
Simple example of accessing cell properties:
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<script language=Javascript>
function whatsinthiscell(oCell) {
alert("You clicked on the cell in row " + oCell.parentElement. rowIndex + " and column " + oCell.cellIndex + "\n\n This cell contains:\n" + oCell.innerHTML );
}
</script>
</head>
<body>
<table>
<tr>
<td onclick="whatsinthiscell(t
<td onclick="whatsinthiscell(t
</tr>
<tr>
<td onclick="whatsinthiscell(t
<td onclick="whatsinthiscell(t
</tr>
</table>
</body>
</html>
>the object being moved are moved in to table cells and it's these table cells which can only contain one moved object and if a second object is moved in to the table cell then it does the alert and moves the object back.
That's compleltey different. You don't need to track positions etc. You can just use mouseover/mouseout/onclick
Presumably you click on cell A to pick up it's contents. At that stage you save a variable to say what object (or cell) the item is from (that could just be the reference to the cell object). Whne you move over another cell, you record what cell that is. If you le go over a cell, then check what's in it and cancel if it's not empty.
Simple example of accessing cell properties:
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<script language=Javascript>
function whatsinthiscell(oCell) {
alert("You clicked on the cell in row " + oCell.parentElement. rowIndex + " and column " + oCell.cellIndex + "\n\n This cell contains:\n" + oCell.innerHTML );
}
</script>
</head>
<body>
<table>
<tr>
<td onclick="whatsinthiscell(t
<td onclick="whatsinthiscell(t
</tr>
<tr>
<td onclick="whatsinthiscell(t
<td onclick="whatsinthiscell(t
</tr>
</table>
</body>
</html>
ASKER
>That's compleltey different. You don't need to track positions etc. You can just use mouseover/mouseout/onclick
>Presumably you click on cell A to pick up it's contents. At that stage you save a variable to say what object (or cell) the item is from (that could just be the reference to the cell object). Whne you move over another cell, you record what cell that is. If you le go over a cell, then check what's in it and cancel if it's not empty.
That is pretty much it, dragging and dropping objects from different table cells and only allowing them to be placed in a new cell if it's empty. I've seen a similar example to one you put above, but I couldn't manage to implement it for dragging and dropping of objects in the cells, have you got an example of that?
>Presumably you click on cell A to pick up it's contents. At that stage you save a variable to say what object (or cell) the item is from (that could just be the reference to the cell object). Whne you move over another cell, you record what cell that is. If you le go over a cell, then check what's in it and cancel if it's not empty.
That is pretty much it, dragging and dropping objects from different table cells and only allowing them to be placed in a new cell if it's empty. I've seen a similar example to one you put above, but I couldn't manage to implement it for dragging and dropping of objects in the cells, have you got an example of that?
Never done drag 'n drop in a web page. Post your basic drag 'n drop and I will try to tweak it to use the above method for collision detection.
ASKER
<HTML>
<HEAD>
<script language="javascript">
<!--
var objectone;
document.onmouseup = MouseClickUp;
document.onmousedown = MouseClickDown;
document.onmousemove = MouseMovement;
function MouseMovement(e) {
if (objectone) {
objectone.parentElement.st
scrollLeft;
objectone.parentElement.st
scrollTop;
return false;
}
}
function MouseClickUp() {
var copyobject = objectone;
objectone = null;
}
function MouseClickDown(e) {
objectone = event.srcElement;
X=event.offsetX;
Y=event.offsetY;
}
//-->
</script>
</HEAD>
<BODY>
<div id="RedDivP1" style="position:absolute;l
<img src="red.gif" id="RedP1" alt="DRAG">
</div>
<div id="BlackDivP1" style="position:absolute;l
<img src="black.gif" id="BlackP1" alt="DRAG">
</div>
<table border=1><tr><td id="cell1">gyhj</td><td id="cell2">dfghj</td></tr>
</BODY>
</HTML>
That allows movment of two objects on a web page. Thanks.
<HEAD>
<script language="javascript">
<!--
var objectone;
document.onmouseup = MouseClickUp;
document.onmousedown = MouseClickDown;
document.onmousemove = MouseMovement;
function MouseMovement(e) {
if (objectone) {
objectone.parentElement.st
scrollLeft;
objectone.parentElement.st
scrollTop;
return false;
}
}
function MouseClickUp() {
var copyobject = objectone;
objectone = null;
}
function MouseClickDown(e) {
objectone = event.srcElement;
X=event.offsetX;
Y=event.offsetY;
}
//-->
</script>
</HEAD>
<BODY>
<div id="RedDivP1" style="position:absolute;l
<img src="red.gif" id="RedP1" alt="DRAG">
</div>
<div id="BlackDivP1" style="position:absolute;l
<img src="black.gif" id="BlackP1" alt="DRAG">
</div>
<table border=1><tr><td id="cell1">gyhj</td><td id="cell2">dfghj</td></tr>
</BODY>
</HTML>
That allows movment of two objects on a web page. Thanks.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks but I still couldn't crack it from there, it's the implementaion that's causing the major problem.
OK. Lets break it down.
DO you agree that the link supplied covers what you want? The example seems pretty close. If you do agree, then isolate what it is that's doesn't work.
If you have adapted code, post it.
DO you agree that the link supplied covers what you want? The example seems pretty close. If you do agree, then isolate what it is that's doesn't work.
If you have adapted code, post it.
I meant to say also:
Let's start from the supplied code and adapt it to your situation, rather than rebuilding it all.
Let's start from the supplied code and adapt it to your situation, rather than rebuilding it all.