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;left:350;top:350;">
   <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.
LVL 15
ncooAsked:
Who is Participating?
 
monosodiumgConnect With a Mentor Commented:
ncoo,

Spent a while trying to get this to work but ran into this on the way:
http://www.siteexperts.com/tips/styles/ts35/page2.asp
Seems to do exactly what (and way better than what I could come up with in a few hours!)

mono
0
 
monosodiumgCommented:
You need "collision detection". Here's simple approach: http://www.devx.com/tips/Tip/12928
0
 
ncooAuthor Commented:
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.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
monosodiumgCommented:
>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.posLeft ;
var nMovingObjectOrigTop = oMovingObject.style.posTop ;

<...oMovingObject changes position...>

if (...collision detected between oMovingObject  and oStaticObject...) {
  //restore oMovingObject  to origianl position:
  oMovingObject.style.posLeft  = nMovingObjectOrigLeft;
  oMovingObject.style.posTop  = nMovingObjectOrigTop;
}
 
0
 
ncooAuthor Commented:
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?
0
 
monosodiumgCommented:
Post the full script you have.
0
 
ncooAuthor Commented:

if (copyobject.id)
      {
       var TempStoreX=0;
       var TempStoreY=0;
       TempStoreX = copyobject.parentElement.style.top;
       TempStoreY = copyobject.parentElement.style.left;
      
      
                document.Show.CurrentTempStoreX.value = TempStoreX;
       document.Show.CurrentTempStoreY.value = TempStoreY;
                }
 
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.

      
      
      
      
      }
0
 
monosodiumgCommented:
>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.
0
 
ncooAuthor Commented:
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
0
 
ncooAuthor Commented:
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.

0
 
ncooAuthor Commented:
Anyone?
0
 
monosodiumgCommented:
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 events for the table cells.

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(this);">foo</td>
            <td onclick="whatsinthiscell(this);">bar</td>
            </tr>
            <tr>
            <td onclick="whatsinthiscell(this);">apple</td>
            <td onclick="whatsinthiscell(this);">pear</td>
            </tr>
            </table>
      </body>
</html>
0
 
ncooAuthor Commented:
>That's compleltey different. You don't need to track positions etc. You can just use mouseover/mouseout/onclick events for the table cells.

>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?
0
 
monosodiumgCommented:
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.
0
 
ncooAuthor Commented:
     <HTML>
      <HEAD>
      <script language="javascript">
      <!--
      
      var objectone;
      
      document.onmouseup = MouseClickUp;
      document.onmousedown = MouseClickDown;
      document.onmousemove = MouseMovement;
      
      
      function MouseMovement(e) {
         if (objectone) {
            objectone.parentElement.style.pixelLeft = event.clientX-X + document.body.

scrollLeft;
            objectone.parentElement.style.pixelTop = event.clientY-Y + document.body.

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;left:50;top:50;">
         <img src="red.gif" id="RedP1" alt="DRAG">
      </div>
      <div id="BlackDivP1" style="position:absolute;left:100;top:50;">
         <img src="black.gif" id="BlackP1" alt="DRAG">
      </div>
<table border=1><tr><td id="cell1">gyhj</td><td id="cell2">dfghj</td></tr></table>


      </BODY>
      </HTML>
That allows movment of two objects on a web page. Thanks.
0
 
ncooAuthor Commented:
Thanks but I still couldn't crack it from there, it's the implementaion that's causing the major problem.  
0
 
monosodiumgCommented:
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.
0
 
monosodiumgCommented:
I meant to say also:
Let's start from the supplied code and adapt it to your situation, rather than rebuilding it all.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.