Skip to main content
gian carlog61267382
Inspiring
Apr 20, 2019 8:07 PM UTC
Answered

Move one object to the position of another

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 is closed to new replies. Start a new post to keep the conversation going.
osgood_Correct answer
Legend
Apr 21, 2019 5:41 PM UTC

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>

View reply

10 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
Apr 20, 2019 9:17 PM UTC

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>
Translate
Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
Apr 20, 2019 9:57 PM UTC

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>
Translate
Nancy O'Shea— Product User & Community Expert
gian carlog61267382Author
Inspiring
Apr 21, 2019 10:33 AM UTC

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.

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