Menu
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>
746
All you have to do is select the element(s) you want to move, then call an “adding” method such as append() , appendTo() or prepend() to add the selected elements to another parent element. jQuery automatically realises that the element(s) to add already exist in the page, and it moves the element(s) to the new parent.
You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
The animate() method is an inbuilt method in jQuery which is used to change the state of the element with CSS style. This method can also be used to change the CSS property to create the animated effect for the selected element.
The jQuery animate() method is used to create custom animations. Syntax: $(selector). animate({params},speed,callback);
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
