js交换两个div的位置

demo

js代码

function exchange(el1, el2){
        var ep1 = el1.parentNode,
            ep2 = el2.parentNode,
            index1 = Array.prototype.indexOf.call(ep1.children, el1),
            index2 = Array.prototype.indexOf.call(ep2.children, el2);
        ep2.insertBefore(el1,ep2.children[index2]);
        ep1.insertBefore(el2,ep1.children[index1]);
    }

  代码非常简短,开始以为需要判断被交换的element是否是父层最后一个,但是实际看来,如果insertBefore第二个参数是undefined的话,那么是直接appendChild的。

时间: 2024-11-09 05:14:39

js交换两个div的位置的相关文章

java实现原数组根据下标分隔成两个子数组并且在原数组中交换两个子数组的位置

此类实现:输出一行数组数据,根据输入的下标,以下标位置为结束,将原数组分割成两组子数组.并交换两个子数组的位置,保持子数组中的元素序号不变.如:原数组为7,9,8,5,3,2 以下标3为分割点,分割为子数组一:7,9,8,5.和子数组二:3,2.经过交换算法后的结果应为:3,2,7,9,8,5 有两种交换算法<1>前插法:将子数组3,2另存在一个临时数组中,将原数组7,9,8,5,3,2每一位向后移两个位置  再将子数组3,2插入到移动好元素位置的原数组中.<2>逆置法:将原数组7

Jquery 动态交换两个div位置并添加Css动画效果

前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置,常见的思路大多是不考虑原始位置,直接采用append或者appendTo方式将两元素进行添加,该法未考虑原始位置,仅会添加为元素的最后一子元素. 今天将给大家介绍一种位置交换方式(判断兄弟元素是否存在),并添加简单的css效果. 设计思路 判断元素后边是否存在兄弟元素:存在则通过insertBefore方法将另一元素添加至其兄弟元素前,否则则直接采用appendTo方法添加至父元素. 核心代码 1.判断其后边是否存在兄弟元素 1 fu

二叉树非递归先中后序遍历 及 非递归交换二叉树两个孩子的位置

看到一个非递归交换一个二叉树的左右孩子的位置,于是想实现之,才发现非递归的先中后序遍历都忘记了……于是杂七杂八的写了一些,抄抄资料就实现了,然后实现非递归交换两个孩子的位置还是相当容易的.先直接上代码吧,其实这东西还是得自己写写过一遍的,印象才会更加深刻: #include <iostream> #include <fstream> #include <string> #include <stack> using std::cout; using std::

原生js实现三个div层动态交换位置

html代码部分 <!--触发变换按钮--> <input type="button" onclick="startMove()" value="点击"/> <!--主体部分--> <div class="localbox"> <div id="b1" class="block1"></div> <div id

交换数组中两个元素的位置,元素包括key和value 一维数组

/*author: [email protected]description: 交换数组中两个元素的位置,元素包括key和value,具体用法见下面的例子*/$arr = array(11=>'a',22=>'b',33=>'c',44=>'d');$res = array_exchange($arr, 11 ,33); //example:echo '<pre>';print_r ($res);echo '</pre>'; function array_e

利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一个接收动态添加div的容器 <div> 功能区域 <br /> <input id="1" type="checkbox" value="新闻" name="11" />新闻 <input id="2" type="checkbox"

JS无限添加HTML到指定位置

用JS把HTML添加到指定位置有两种写法,一种是用字符串,一种是用javascript中的方法 第一种: 用字符串写 <h2>利用JS无限添加一个相同部分</h2> <h5>第一种写法</h5> <%--有多少个相同的这里面的值就是几--%> <asp:HiddenField ID="hfCount" runat="server" Value="-1" /> <%--每

js实现可拖动Div

js实现可拖动Div 随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的   mousemove事件 3.取消事件 然后我们看一下代

利用cookie记录div之前位置

cookie除了能用来存储用户名,密码等数据外还可以用来记录div之前的位置. 先上个布局 <div id="div1" style></div> #div1{ width: 100px; height: 100px; background: red; position: absolute; } 这里先说下拖拽的大体原理,将物体拖到新的位置可以通过改变left和top实现. 在将div从位置1移动到div2的过程中,不变的是鼠标在div中的位置.因此我们让鼠标在