CODEWITHSUNDEEP
jqueryhtml
Charlie pito
Charlie pito

Reputation: 87

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

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>

Upvotes: 8

Views: 23755

Answers (3)

hassanrazadev
hassanrazadev

Reputation: 664

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

Upvotes: -1

chitzui
chitzui

Reputation: 4098

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>

Upvotes: 13

Martijn de Langh
Martijn de Langh

Reputation: 425

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
         })
    })

});

Upvotes: 8

Related Questions