Solved

Obeject ID Alert

Posted on 2004-04-08
20
306 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
Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

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

Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

803 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