Why are both objects moving – JavaScript – SitePoint Forums


I want two separate objects on a page to be draggable by the user – click and drag the mouse. I’m having all sorts of problems achieving this. The following test code confuses me. Both objects are moved and I can’t figure out why.

Mouse move

Run the code snippet

Expand snippet

All ideas will be gratefully received, I don’t know what other detail to add. The two areas are identical but belong to different classes and have different identifiers. second zone ids not appearing in javascript

I don’t know if this is causing your problem, but you have two openings

s instead of closing

It may also be better to use HTML5 rather than HTML4.01.


Your test code seems to be very dated.

I’m just taking a look at the following tutorial, it’s well explained and I think it can be helpful for you.


I think I Love You! That’s it. Due to the disappearance, there was only one object. Now only one moves. Now to make the second moveable too!

1 like

As @rpg_digital said above, your code is very old and unlikely to work cross-browser because you have a very old doctype and are using Quirks mode. This means that some things will only work if the browser steps in and helps you with them.

The percentage height on your divs won’t work in standard mode the way you set them and the js won’t update because you didn’t use units on your measurements (px).

You really don’t want to leave anything to chance, so choose a current doctype (html5) and make sure to use units in your dimensions for CSS measurements.

i.e. turn the number into a string with units by adding +”px”.

document.getElementById("container").style.top = nowY+event.clientY-offsety + "px"

For the percentage height to work in standard mode, you need an unbroken chain of heights up to the root, so in your code you would need this:


You also have typos in your css for left: 15% and left: 75% (although they don’t make much sense because the 75% will move most of that element off the screen to the right).

Even though you may be learning, there’s no reason to learn the wrong way to do something, because it makes it harder to unlearn. :slight_smile: Try to follow the link pointed by @rpg_digital :slight_smile:


Bullshit Paul
Works fine now Gandalf spotted the spelling mistakes so I didn’t close my divs
px is really not necessary – never was and I’ve been writing HTML since long before it was invented! Yes, this is actually IBM’s dsoss that we were using for documentation – html has an extra tag
Thank you, but what you wrote is also irrelevant to the problem!
No typos by the way – they might not make sense to you but they do to me – and aren’t part of the problem – what are you fussy?

as I’ve probably been doing this since before you were born, I doubt I need your tutorial. And you didn’t address the issue – Gandalf spotted the error – you didn’t – too high on your horse perhaps?

OK, let’s not get personal here.

Members give their free time to help and offer that help based on their understanding of the problem. If they don’t have the full picture, it’s not their fault, nor a reason to respond with insults.

I totally disagree, but please do so with courtesy.


So I had to imagine that.

Sorry if my comments upset you, but I’m just trying to point you in the right way to do things these days. You can indeed have a one-time setup that allows you to use old-school code, but of course we weren’t aware of that situation.

It would indeed be remiss of us not to mention broken or malformed code as the internet is forever and anyone else looking at this thread may copy your code and try to use it and fail miserably as it certainly won’t work in a doctype standard . Now that you’ve explained that you have a special situation and are able to use old-fashioned code, visitors here may be aware that the code is just a special use case.



Comments are closed.