Rahil Khan Rahil Khan - 6 months ago 68
jQuery Question

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>

Answer

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

});