Why do both objects move

JavaScript
1

I want two separate objects on a page to be moveable by the user - mouse click and drag. I’m having all sorts of problems achieving this. the following test code baffles me. Both objects get moved and I cannot work out why.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>Mouse move</title>
<meta http-equiv="Content-Type"  content="text/html; charset=windows-1252">
<script language="JavaScript" type="text/JavaScript">
var cursorInPopUp           = true;
var offsetx;
var offsety;
var nowX;
var nowY;
function initialiseFloating ()
{
  document.onmousedown  = PrepareFloatMove;
  document.onmouseup    = Function("cursorInPopUp=false");
}
function PrepareFloatMove()
{
  if (event.target.id!="bar") return

  offsetx               = event.clientX
  offsety               = event.clientY
  nowX              = parseInt(document.getElementById("container").offsetLeft);
  nowY              = parseInt(document.getElementById("container").offsetTop);
  cursorInPopUp         = true;
  document.onmousemove      = moveFloat;
}
function moveFloat()
{
  if (!cursorInPopUp)
  {
    document.body.style.cursor = 'default';
    return;
  }
  document.body.style.cursor            = 'move';
  document.getElementById("container").style.left   = nowX+event.clientX-offsetx
  document.getElementById("container").style.top    = nowY+event.clientY-offsety
  return false;
}
</script>
<style>
.container
{
  position  :   relative;
  top:0px;
  left;15%;
  width:60%;
  height:60%;
  border:2px solid black;
}
.bar
{
  position:relative;
  top:0px;
  width:100%;
  height:10%;
  border:2px solid red;
  cursor:pointer;
}
.contents
{
  position:relative;
  top:0px;
  width:100%;
  height:88%;
  border:2px solid green;
}
.container2
{
  position  :   relative;
  top:0px;
  left;75%;
  width:60%;
  height:60%;
  border:2px solid pink;
}
.bar2
{
  position:relative;
  top:0px;
  width:100%;
  height:10%;
  border:2px solid blue;
  cursor:pointer;
}
.contents2
{
  position:relative;
  top:0px;
  width:100%;
  height:88%;
  border:2px solid yellow;
}
</style>
</head>
<body background="black">
<div id="container" class="container">
  <div  id="bar" class="bar">
  </div>
  <div   id="contents"  class="contents">
  </div>
<div>


<div id="container2" class="container2">
  <div  id="bar2" class="bar2">
  </div>
  <div   id="contents2"  class="contents2">
  </div>
<div>
<script>    initialiseFloating('container');</script>
</body>
</html>

Run code snippet

Expand snippet

Any ideas will be gratefully received I don’t know what other detail to add. Both areas are the same but belong to different classes and have different IDs. the IDs of the second area do not appear in the javascript

2

I don’t know if that’s causing your problem, but you have two opening <div>s instead of closing </div>s.

You might also be better off using HTML5 rather than HTML4.01.

3 Likes
3

Your test code appears to be very dated.

I’m just having a look through the following tutorial, it’s nicely explained and I think it maybe of use to you.

2 Likes
4

I think I love you! That’s it. Because of the missing there was only one object. Now only one moves. Now to make the second draggable too!

1 Like
5

As @rpg_digital said above your code is very old and unlikely to work cross browser as you have a very old doctype and are utilising quirks mode. That means that certain things will only work if the browser steps in and helps you along with them.

The percentage height on your divs won’t work in standards mode in the way that you have defined them and the js won’t update because you have not used units on your measurements (px).

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

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

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

For percentage height to work in standards mode you need an unbroken chain of heights all the way back to root so in your code you would need this:


html,body{height:100%;margin:0;padding:0;}

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

Even though you may be just learning there is no reason to learn the wrong way to do something as that just makes it harder to unlearn :slight_smile: Try following the link that @rpg_digital pointed to :slight_smile:

2 Likes
6

Bullshit Paul
Works fine now Gandalf spotted the spelling mistakes so I didn’t close my divs
px is really not required - never has been and I’ve been writing html since before it was invented! Yes, it’s in fact IBM-s dsoss we used to use for documentation - html has one extra tag
Thanks but what you wrote is furthermore irrelevant to the problem!
No typos by the way - they may not make sense to you but they do to me - and not part of the problem - what are you a nit-picker?

7

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

8

OK, let’s not get personal here.

Members are giving their up their free time to help, and are offering that help based on their understanding of the issue. If they don’t have the full picture, that is not their fault, nor is it a reason to respond with insults.

By all means disagree, but please do it courteously.

4 Likes
9

Then I must have imagined this.

Sorry if my comments upset you but just trying to point you in the correct way of doing things these days. You may indeed have a unique set up that allows you to use old fashioned code but of course we were not aware of that situation.

It would indeed be remiss of us not to mention code that is broken or malformed 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 will not work in a standards doctype. Now that you have explained you have a special situation and are able to use old fashioned code then visitors here can be aware that the code is a special use case only.

7 Likes
11

Haha he is writing html since before it was invented and didn’t find a missing closing Div…

Made my day…

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.