move an element from one div to another div with animate effect on button click using html and jquery

Question

on button click please help me by showing some examples how to move an element by taking its attribute as src image and placing it in another div, please find below the html sample, here i need to move respuestas img into article preg with animate effect and revert back on reset.

<html>
<body>
<section id="preguntas">
<div id="base">
<article class="preg1">
        </article>
    <article class="prega"> 
  </article>
    <article class="pregb"> 
    </article>
  <article class="pregc">
        </article>
 <article class="pregd">
        </article>  
  <article class="prege">
    </article>
 <article class="pregf">
    </div>
    <div id="respuestas">
     <span id="img1">  <img src="img/img1.png" class="respuesta" alt="img1"/></span> 
     <span id="img2"> <img src="img/img2.png" class="respuesta" alt="img2"/></span>
     <span id="img3"> <img src="img/img3.png" class="respuesta" alt="img3"/></span>
     <span id="img4">   <img src="img/img4.png" class="respuesta" alt="img4"/>  </span>
    <span id="img5">    <img src="img/img5.png" class="respuesta" alt="img5"/></span>
    <span id="img6">    <img src="img/img6.png" class="respuesta" alt="img6"/></span>
    </div>
 </section>
  <div id="btns">

   <input id="Move" type="button" value="Done" /><br />
    </div>
 </body>
</html>

[First thing that came up when I googled was this question](http://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element). Is that what you're looking for? — Calvin Scherle, Oct 30 '14 at 10:46
something similar but on button click i need to move it with animate effect — Charlie pito, Oct 30 '14 at 10:49
Something like this? http://www.w3schools.com/html/html5_draganddrop.asp — Martijn de Langh, Oct 30 '14 at 10:57
the link is just a simple drag and drop, whereas i need my elements to move on button click event — Charlie pito, Oct 30 '14 at 11:01
@RahilKhan http://stackoverflow.com/questions/1520178/jquery-using-append-with-effects seems like what you are looking for? I forked the fiddle so it happens on click. http://jsfiddle.net/o9yjrz3L/ — Leto, Oct 30 '14 at 12:14

chitzui · Answer 1 · 2016-06-04T13:55:29.480

Here is a similar solution to Martijn de Langhs’ answer but with a button and no jquery:

http://codepen.io/pen/RRPQEX

// The JavaScript (should work in all major browsers and IE8+)

var elements = document.getElementsByClassName('element');
var target = document.getElementsByClassName('target')[0];
var button = document.getElementById('button');

// store the x,y coordinates of the target
var xT = target.offsetLeft;
var yT = target.offsetTop;

// add a click event listener to the button
button.addEventListener('click', function() {
  for (var i = 0; i < elements.length; i++) {
    // store the elements coordinate
    var xE = elements[i].offsetLeft;
    var yE = elements[i].offsetTop;
    // set elements position to their position for smooth animation
    elements[i].style.left = xE + 'px';
    elements[i].style.top = yE + 'px';
    // set their position to the target position
    // the animation is a simple css transition
    elements[i].style.left = xT + 'px';
    elements[i].style.top = yT + 'px';
  }
});

/* The CSS you need for the animation: */

.element,
.target {
  position: absolute;
  transition: left 1s ease-out, top 1s ease-out;
}

/* And the rest... */

/*
 * Style everything to be visible
 */

.element,
.target {
  width: 10px;
  height: 10px;
  background-color: green;
}
.target {
  background-color: red;
}

/*
 * Randomize the elements position
 */

.element:nth-child(1) {
  left: 43px;
  top: 10px;
}
.element:nth-child(2) {
  left: 46px;
  top: 22px;
}
.element:nth-child(3) {
  left: 99px;
  top: 26px;
}
.element:nth-child(4) {
  left: 180px;
  top: 174px;
}
.element:nth-child(5) {
  left: 121px;
  top: 90px;
}
.target {
  top: 25px;
  left: 147px;
}

<!-- The HTML (dead simple for the tutorials purpose) -->

<button id="button" role="button">Move!</button>

<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>

<div class="target"></div>

score 7 · Accepted Answer · answered Oct 30 '14 at 12:13

7

Got it working, here is the fiddle

http://jsfiddle.net/h7tuehmo/3/

Javscript:

var x;
var y;
$('article').each(function(index){
    $(this).click(function(){
        $(this).addClass('selected') ;
        x = $(this).offset().left;
        y = $(this).offset().top;
    })
    });

$('img').each(function(index){
    var xi = $(this).offset().left;
    var yi = $(this).offset().top;
    $(this).css('left', xi).css('top', yi);
    $(this).click(function(){
         $(this).animate({
    left: x,
    top: y
         })
    })

});

answered Oct 30 '14 at 12:13

Martijn de Langh

405
3
16

thanks not exactly what i was looking for, but will try to work over it, i need a button event instead of event on the object itself – Charlie pito Oct 30 '14 at 12:22
A button where? The image or the place you want it? Place the buttons in the HTML of your question post where you want them – Martijn de Langh Oct 30 '14 at 12:23
http://jsfiddle.net/rahilkhan/r03ey8h6/ please see this fiddle i have created, what i need to do is i need the img7 img8 to move up and sit in the pregs when clicked on show – Charlie pito Oct 30 '14 at 12:49

score 0 · Answer 3 · answered Sep 23 '20 at 19:53

0

Very old thread but I want to contribute my answer as it might help someone else.
I created small jquery plugin for similar purpose which can be found here
https://github.com/hassanrazadev/jquery-moveToTop

answered Sep 23 '20 at 19:53

hassanrazadev

626
9
15

move an element from one div to another div with animate effect on button click using html and jquery

3 Answers3

Linked