[英]Swap div position with animation
How to swap div position when clicked only with the first div in stack . 仅单击堆栈中的第一个div时如何交换div位置。 So when div 2 or 3 is clicked it will swap with the first child of parent in DOM and when the first child of parent in DOM is clicked nothing should happen.
因此,当单击div 2或3时,它将与DOM中父级的第一个孩子交换,而当单击DOM中父级的第一个孩子时,则不会发生任何事情。
This is my fiddle: http://jsfiddle.net/exc5m046/ 这是我的小提琴: http : //jsfiddle.net/exc5m046/
HTML 的HTML
<div id="container">
<div id="one" class="move">div 1</div>
<div id="two" class="move">div 2</div>
<div id="three" class="move">div 3</div>
</div>
CSS 的CSS
#container {
width: 200px;
color:#fff;
position: relative;
text-align:center;
}
#container div {
position: relative;
margin:10px;
background:#ff00ab;
padding:5px;
border-radius:3px;
text-align:center;
display:inline-block;
}
jQuery jQuery的
var animating = false;
$('#container').on('click', '.move', function () {
var clickedDiv = $(this).closest('div'),
prevDiv = clickedDiv.prev(),
distance = clickedDiv.offset().left - prevDiv.offset().left;
if (prevDiv.length) {
animating = true;
$.when(clickedDiv.animate({
left: -distance
}, 2000),
prevDiv.animate({
left: distance
}, 2000)).done(function () {
prevDiv.css('left', '0px');
clickedDiv.css('left', '0px');
clickedDiv.insertBefore(prevDiv);
animating = false;
});
}
});
EDITTED:
编辑:
To swap the clicked div only with the first element , you have to change the script.
要仅将单击的div
与第一个元素交换,您必须更改脚本。 The
prevDiv
variable is selecting the previous sibiling the apply the switch, but you want to change it to: prevDiv
变量正在选择上一个应用开关的功能,但是您想要将其更改为:
prevDiv = $("#container > :first-child")
so it always selects the first child of the container. 因此它总是选择容器的第一个孩子。
Then, add the condition that the clicked element cannot be the first one: 然后,添加条件,即clicked元素不能是第一个元素:
if (!clickedDiv.is(":first-child")) {
Finally, to swap correctly, place the prevDiv
at the place where the clicked div was, and set the clickedDiv
to be the first child with prependTo('')
: 最后,要正确交换,请将
prevDiv
放置在prevDiv
div所在的位置,并将clickedDiv
设置为具有prependTo('')
的第一个孩子:
prevDiv.insertBefore(clickedDiv);
clickedDiv.prependTo("#container");
And, now , you're good to go: http://jsfiddle.net/exc5m046/3/
而且, 现在 ,您很高兴: http : //jsfiddle.net/exc5m046/3/
Edit, updated 编辑,更新
Try 尝试
html html
<!-- removed class `first` from element at index 0 -->
<div id="container">
<div id="one" class="move">div 1</div>
<div id="two" class="move">div 2</div>
<div id="three" class="move">div 3</div>
</div>
js js
var animating = false;
$('#container').on('click', '.move', function () {
var clickedDiv = $(this).closest('div'),
// adjusted `prevDiv` to `$(".move").eq(0)`
prevDiv = $(".move").eq(0),
distance = clickedDiv.offset().left - prevDiv.offset().left;
if (/*!clickedDiv.is(".first") &&*/ prevDiv.length) {
animating = true;
$.when(clickedDiv.animate({
left: -distance
}, 2000),
prevDiv.animate({
left: distance
}, 2000)).done(function () {
prevDiv.css('left', '0px');
clickedDiv.css('left', '0px');
// changed `clickedDiv.insertBefore(prevDiv);` to
// `clickedDiv.prependTo("#container");`
clickedDiv.prependTo("#container");
animating = false;
});
}
});
http://jsfiddle.net/exc5m046/14/ http://jsfiddle.net/exc5m046/14/
See http://api.jquery.com/prependTo/ 参见http://api.jquery.com/prependTo/
Try 尝试
$('#container div').on('click', '.move', function () {
if ( $( this ).index() == 0 ) {
return
} else {
//...code
}
}
This triggers your code only, if the div
is not the first element in the parent #container
. 仅当
div
不是父#container
的第一个元素时 ,这才触发您的代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.