Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript why do both objects move?

A

Adrian

New Coder
0
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>
/
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
 
Sort by date Sort by votes
First of all, please always post code inside code tags.

I see the problem but haven't find a good way to solve it yet. The bottom container for some reason wants to stay anchored under the top container. Must have to to with the relative position attributes. Unfortunately when you use absolute positioning you can no longer move it.
If you change the logic to act on the bottom container, you'll see that you can then move that one independently - although the coordinates are not right. I'll need to study this more. For now some (unrelated) observations on your code :
  1. In your CSS you have left;15% and left;75% . A colon will work better than a semicolon.
  2. This <body background="black"> will try to load an image with the name black. I think you might have intended <body bgcolor="black"> - although then you don't get to see your cursors anymore :)
  3. At the end of the body you call initialiseFloating('container'); However that function does not have a parameter !
  4. Function moveFloat() does a return false; Is that for a reason ?
  5. Your code to change the body cursor doesn't seem to work. Or at least I did not see anything changing.
  6. Having the mousemove function terminate the move, based on a value set by the mouseup function, does not seem the best design. I think this can be structured better.
  7. You define the mousemove function repeatedly, inside the mousedown function. I think that should ne moved to the PrepareFloatMove function, together with the other handlers.
  8. You may want to evaluate document.getElementById("container2") just once, during initialization, instead of twice in every mouse event.
I'll be back when I know more.
 
Last edited by a moderator:
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom