使用 html 和 jquery 将元素从一个 div 移动到另一个 div 对按钮单击具有动画效果

Question

点击按钮请帮助我通过展示一些示例如何通过将其属性作为 src 图像并将其放置在另一个 div 中来移动元素，请在 html 示例下方找到，这里我需要将 respuestas img 移动到文章 preg 中动画效果并在重置时恢复。

<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 1

这是与 Martijn de Langhs 的回答类似的解决方案，但有一个按钮并且 没有 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>

Answer 2

搞定了，这里是小提琴

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

JavaScript：

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

});

Answer 3

非常老的帖子，但我想贡献我的答案，因为它可能对其他人有所帮助。
我为类似目的创建了小型 jquery 插件，可以在这里找到
https://github.com/hassanrazadev/jquery-moveToTop