Solved

Obeject ID Alert

Posted on 2004-04-08
20
299 Views
Last Modified: 2008-03-06
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.
0
Comment
Question by:ncoo
  • 9
  • 9
20 Comments
 
LVL 12

Expert Comment

by:monosodiumg
ID: 10784512
You need "collision detection". Here's simple approach: http://www.devx.com/tips/Tip/12928
0
 
LVL 15

Author Comment

by:ncoo
ID: 10784870
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
 
LVL 12

Expert Comment

by:monosodiumg
ID: 10787191
>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
 
LVL 15

Author Comment

by:ncoo
ID: 10787507
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
 
LVL 12

Expert Comment

by:monosodiumg
ID: 10787650
Post the full script you have.
0
 
LVL 15

Author Comment

by:ncoo
ID: 10787763

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
 
LVL 12

Expert Comment

by:monosodiumg
ID: 10787820
>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
 
LVL 15

Author Comment

by:ncoo
ID: 10787888
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
 
LVL 15

Author Comment

by:ncoo
ID: 10788077
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 15

Author Comment

by:ncoo
ID: 10813195
Anyone?
0
 
LVL 12

Expert Comment

by:monosodiumg
ID: 10815422
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
 
LVL 15

Author Comment

by:ncoo
ID: 10815781
>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
 
LVL 12

Expert Comment

by:monosodiumg
ID: 10816155
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
 
LVL 15

Author Comment

by:ncoo
ID: 10817051
     <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
 
LVL 12

Accepted Solution

by:
monosodiumg earned 55 total points
ID: 10832756
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
 
LVL 15

Author Comment

by:ncoo
ID: 10846734
Thanks but I still couldn't crack it from there, it's the implementaion that's causing the major problem.  
0
 
LVL 12

Expert Comment

by:monosodiumg
ID: 10849062
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
 
LVL 12

Expert Comment

by:monosodiumg
ID: 10849066
I meant to say also:
Let's start from the supplied code and adapt it to your situation, rather than rebuilding it all.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now