Skip to main content
G
gian carlog61267382
Inspiring
April 20, 2019
Answered

Move one object to the position of another

  • April 20, 2019
  • 1 reply
  • 2080 views

I have two object

<div id = "object1"></div> 

<div id = "object2"></div> 

These "object" are setting with style property like:

<style>

#MyObject2 {

top: 700; left: 400px; width: 70px; height: 70px;

position: absolute;

background-image:  url(http://xxx1.png); background-size: cover;">

}

</style>

And so on.

I need a function that permit with a mouseclick to move the object2 to the place of the object1.

How it is possible to do?

Thanks and Happy Easter to all!!

This topic has been closed for replies.
Correct answer osgood_

In your last script I need a variable at this point: "10px".

$( ".block2" ).animate({ "left": "10px" }, "slow" );


https://forums.adobe.com/people/gian+carlog61267382  wrote

In your last script I need a variable at this point: "10px".

$( ".block2" ).animate({ "left": "10px" }, "slow" );

Are we getting any closer?

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

var MyObject1 = $("#MyObject1").position();

$("#MyObject2").animate({top: MyObject1.top, left: MyObject1.left});

});

});

</script>

<style>

#MyObject1 {

top: 100px;

left: 200px;

width: 70px;

height: 70px;

position: absolute;

background-color: red;

}

#MyObject2 {

top: 700px;

left: 400px;

width: 70px;

height: 70px;

position: absolute;

background-color: yellow;

z-index: 100;

}

</style>

</head>

<body>

<div id="MyObject1"></div>

<div id="MyObject2"></div>

<button>Move</button>

</body>

</html>

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 20, 2019

I think this will do what you asked for.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Animate</title>
<style>
.container {
margin: 0 auto;
width: 80%;
position: relative;
}
.block1 {
position: absolute;
background-color: #abc;
left: 10px;
width: 150px;
height: 150px;
z-index: 100;
}
.block2 {
position: absolute;
background-color: #ff0000;
left: 165px;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div class="container">
<button id="right">CLICK ME &raquo;</button>
<div class="block1"></div>
<div class="block2"></div>
</div>
<!--jQuery 3 library--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script>
$( "#right" ).click(function() {
  $( ".block1" ).animate({ "left": "+165px" }, "slow" );
});
</script>
</body>
</html>
Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 20, 2019

After re-reading your post, you actually want object 2 to move, not object 1.

OK.  My revised code.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Animate</title>
<style>
.container {
margin: 0 auto;
width: 80%;
position: relative;
}
.block1 {
position: absolute;
background-color: #abc;
left: 10px;
width: 150px;
height: 150px;
}
.block2 {
position: absolute;
background-color: #ff0000;
left: 165px;
width: 150px;
height: 150px;
z-index: 100;
}
</style>
</head>
<body>
<div class="container">
<button id="left"> &laquo; CLICK ME </button>
<div class="block1">
</div>
<div class="block2">
</div>
</div>
<!--jQuery 3 library--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script>
$( "#left" ).click(function() {
  $( ".block2" ).animate({ "left": "10px" }, "slow" );
});
</script>
</body>
</html>
Nancy O'Shea— Product User & Community Expert
G
gian carlog61267382Author
Inspiring
April 21, 2019

Thank you Nancy for you gentle help,

I''m sorry, It is my fault to tryed before to explain in a short way my purpose, but what I really ned is a var for  "+165", because "object1" is in movement, so I also need a variable for vertical parameter.

In wich way can I complete your script or do what i need?

Thank you and I beg pardon for my incomplete question.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices