<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>jquery交换Div位置</title></head><body> <div id="top" style="width:100%;height:100px"> <div id="topDiv" style="width:100%;height:100%;background-color:lightcoral;float:left;"></div> <div style="clear:both"></div> </div> <div style="width:100%;height:1000px"> <div id="left" style="width:10%;height:100%;background-color:lightgreen;float:left;"></div> <div id="right" style="width:90%;height:100%;background-color:lightgray;float:left;"> <h1> <a id="changeDiv" href="javascript:;">交换</a></h1> </div> <div style="clear:both"></div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(function () { $("#changeDiv").click(function () { changePosition($("#topDiv"), $("#left")); }); }); function changePosition(select1, select2) { var removeDiv1 = select1; var removeDiv2 = select2; var appendToObj1 = hasBorther(removeDiv1); var appendToObj2 = hasBorther(removeDiv2); addCartoon(removeDiv1, removeDiv2);//添加动画 //移动两个容器 removeDiv(appendToObj1, removeDiv2); removeDiv(appendToObj2, removeDiv1); } //判断其后边是否存在兄弟元素 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); }) } function changePosition2() { 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(‘请选择不同元素交换位置！‘); } } </script></body></html>
