Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Obeject ID Alert

Posted on 2004-04-08
20
Medium Priority
?
313 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

670 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