前端網頁開發中我們經常會遇到需要動態置換兩個DIV元素的位置，常見的思路大多是不考慮原始位置，直接采用append或者appendTo方式將兩元素進行添加，該法未考慮原始位置，僅會添加為元素的最后一子元素。
今天將給大家介紹一種位置交換方式（判斷兄弟元素是否存在），並添加簡單的css效果。
設計思路
判斷元素后邊是否存在兄弟元素；存在則通過insertBefore方法將另一元素添加至其兄弟元素前，否則則直接采用appendTo方法添加至父元素。
核心代碼
1.判斷其后邊是否存在兄弟元素
1 function hasBorther(va1){ 2 if(va1.next()[0]){//兄弟元素 3 return {bor:va1.next()}; 4 }else{ 5 return {par:va1.parent()};//父元素 6 } 7 }
2.根據兄弟元素存在與否改變元素位置
function removeDiv(app,Div){
if(app.bor){//兄弟元素
Div.insertBefore(app.bor);
}else{
Div.appendTo(app.par);
}
}
3.移動時之前------添加動畫
var clearTransform=function(Div,time){
setTimeout(function(){
Div.css({'transform':'inherit','-webkit-transform':'inherit'});
},time)
}
//記錄兩容器原始高寬
var oldOpt={ax:a.width(),ay:a.height(),bx:b.width(),by:b.height()};
//獲取兩容器屏幕位置
var a_pos=a.offset();
var b_pos=b.offset();
//獲取兩容器偏移值
var offset_x=a_pos.left-b_pos.left;
var offset_y=a_pos.top-b_pos.top;
//第一個花括號里面是動畫內容，可以為空，但不能省去中括號
a.animate({},function(){
var offset_x_=-offset_x; //偏移值取反
var offset_y_=-offset_y;
var transformStr='rotate(360deg) translate('+offset_x_+'px,'+offset_y_+'px)';
a.css({'width':oldOpt.bx+'px','height':oldOpt.by+'px','transform':transformStr,'-webkit-transform':transformStr});
clearTransform(a,0);
})
b.animate({},function(){
var transformStr='rotate(360deg) translate('+offset_x+'px,'+offset_y+'px)';
b.css({'width':oldOpt.ax+'px','height':oldOpt.ay+'px','transform':transformStr,'-webkit-transform':transformStr});
clearTransform(b,0);
})
效果圖
說明：更改下拉框可完成兩容器位置的交換，目前版本加入部分css動畫，效果不是十分完美，歡迎大佬指導。
源碼
說明：引入jquery庫即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Document
</title>
</meta>
</head>
<body>
<script src="jquery-1.11.3.min.js" type="text/javascript">
</script>
<style>
.my-container {
margin: auto 0;
padding: 10px;
}
.my-container>div:first-child {
background: #c0cbff;
margin: auto 0;
padding: 10px;
height: 130px;
}
.my-container>div:last-child {
background: pink;
margin: 10px 0;
padding: 10px;
height: 130px;
}
.my-container>div>div {
width: 100px;
height: 100px;
margin: 5px 10px;
padding: 10px;
float: left;
/* 過渡時間 */
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
}
.my-container>div:first-child>div {
background: #ccc;
}
.my-container>div:last-child>div {
background: #fff;
}
</style>
<div class="my-container">
<div class="div1">
<div id="A">子容器A</div>
<div id="B">子容器B</div>
</div>
<div class="div2">
<div id="C">子容器C</div>
<div id="D">子容器D</div>
</div>
</div>
交換元素：
<select name="" id="select1" class="select">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select name="" id="select2" class="select">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<script>
$(function() {
$('.select').on('change',function(){
var select1=$('#select1');
var select2=$('#select2');
if(select1.val()!=select2.val()){//不同元素 位置交換
var removeDiv1=$('#'+select1.val());
var removeDiv2=$('#'+select2.val());
var appendToObj1=hasBorther(removeDiv1);
var appendToObj2=hasBorther(removeDiv2);
addCartoon(removeDiv1,removeDiv2);//添加動畫
//移動兩個容器
removeDiv(appendToObj1,removeDiv2);
removeDiv(appendToObj2,removeDiv1);
}else{
alert('請選擇不同元素交換位置！');
}
})
//判斷其后邊是否存在兄弟元素
function hasBorther(va1){
if(va1.next()[0]){//兄弟元素
return {bor:va1.next()};
}else{
return {par:va1.parent()};//父元素
}
}
//保證位置正確
function removeDiv(app,Div){
if(app.bor){//兄弟元素
Div.insertBefore(app.bor);
}else{
Div.appendTo(app.par);
}
}
//移動時之前------添加動畫
function addCartoon(a,b){
var clearTransform=function(Div,time){
setTimeout(function(){
Div.css({'transform':'inherit','-webkit-transform':'inherit'});
},time)
}
//記錄兩容器原始高寬
var oldOpt={ax:a.width(),ay:a.height(),bx:b.width(),by:b.height()};
//獲取兩容器屏幕位置
var a_pos=a.offset();
var b_pos=b.offset();
//獲取兩容器偏移值
var offset_x=a_pos.left-b_pos.left;
var offset_y=a_pos.top-b_pos.top;
//第一個花括號里面是動畫內容，可以為空，但不能省去中括號
a.animate({},function(){
var offset_x_=-offset_x; //偏移值取反
var offset_y_=-offset_y;
var transformStr='rotate(360deg) translate('+offset_x_+'px,'+offset_y_+'px)';
a.css({'width':oldOpt.bx+'px','height':oldOpt.by+'px','transform':transformStr,'-webkit-transform':transformStr});
clearTransform(a,0);
})
b.animate({},function(){
var transformStr='rotate(360deg) translate('+offset_x+'px,'+offset_y+'px)';
b.css({'width':oldOpt.ax+'px','height':oldOpt.ay+'px','transform':transformStr,'-webkit-transform':transformStr});
clearTransform(b,0);
})
}
})
</script>
</body>
</html>