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. Is that what you're looking for? — Calvin Scherle
– Calvin Scherle, Commented Oct 30, 2014 at 10:46
something similar but on button click i need to move it with animate effect — Charlie pito
– Charlie pito, Commented Oct 30, 2014 at 10:49
Something like this? w3schools.com/html/html5_draganddrop.asp — Martijn de Langh
– Martijn de Langh, Commented Oct 30, 2014 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
– Charlie pito, Commented Oct 30, 2014 at 11:01

chitzui · Accepted Answer · 2016-06-04 13:55:29Z

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>

Martijn de Langh · Accepted Answer · 2014-10-30 12:13:44Z

8

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, 2014 at 12:13

Martijn de Langh

4253 silver badges16 bronze badges

3 Comments

Charlie pito Over a year ago

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

Martijn de Langh Over a year ago

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 <button>Move</button>

Charlie pito Over a year ago

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

hassanrazadev · Accepted Answer · 2020-09-23 19:53:54Z

-1

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, 2020 at 19:53

hassanrazadev

6649 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related