如何用javaScript实现两个div(节点)互换位置

最新推荐文章于 2022-09-01 16:47:41 发布
最新推荐文章于 2022-09-01 16:47:41 发布
阅读量3.9k 收藏 3
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AzeShinja/article/details/105922980
版权

直接贴代码

如果有任何可以改进的地方，欢迎评论区留言！共同努力加油💪

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #d1{
    background-color: aliceblue;
    width: 40px;
    height: 40px;
  }
  #d2{
    background-color: aqua;
    width: 40px;
    height: 40px;

  }
</style>
<body>
  <div id="father">
  <div id="d1">
d1
  </div>
  <div id="d2">
    d2
  </div>
  <div id="d3">
    d3
  </div>
  <div id="d4">
    d4
  </div>
  <div id="d5">
    d5
  </div>
</div>
</body>
<script>
  var newObj = document.createElement("div");
  newObj.setAttribute("id","new");
  newObj.innerHTML = "哈哈";
  var d1 = document.getElementById("d1");
  var d2 = document.getElementById("d2");
  var d3 = document.getElementById("d3");
  var d4 = document.getElementById("d4");
  var d5 = document.getElementById("d5");
  d1.parentElement.insertBefore(newObj,d5);
  d1.parentElement.insertBefore(d5,d2);
  d1.parentElement.insertBefore(d2,newObj);
  d1.parentElement.removeChild(newObj);
</script>
</html>

完毕，博主用的是inserBefore方法做的 里面有两个参数，第一个是新的节点（你想要插入的节点），第二个是被插入的节点（被插在前面的节点）

AzeShinja
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js的节点交换
qq_36155035的博客
02-27 1090
                                       js的节点交换 //实现：city子节点与game子节点对应的位置的元素互换&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt...
div拖拽互换位置
lxrbaf的博客
06-20 681
如题
交换两个div的位置
04-24
点击事件触发，交换两个div的位置，呃。。其实方法很简单的
两个div之间互换位置
漫天随飞雪的博客
09-29 1万+
&lt;div id="divs"&gt;     &lt;div class="b-1"&gt;111111&lt;/div&gt;     &lt;div class="b-2"&gt;222222&lt;/div&gt;     &lt;div class="b-3"&gt;333333&lt;/div&gt;
js实现两个div交换位置
热门推荐
longlongxue的专栏
09-17 1万+
同事问了一个问题，就是关于两个层交换位置的问题，其实实现起来很简单，我在这里简单的列举两种方法： 方法一：这里只是用的纯js来实现，我直接贴代码，其中前面是判断是否兼容fixfox function moveDiv(id_1,id_2)  //参数传递的是你需要交换位置的两个div的ID {     var insert = function(nodeInsert,nodeTo){
jquery两个div互换_jQuery实现两个div中按钮互换位置详解
weixin_39571749的博客
12-21 490
本文主要介绍了使用jQuery实现两个p中按钮互换位置的实例代码,需要的朋友可以参考下，希望能帮助到大家。效果如下代码如下：$(function() {//定义一个变量等于所有button按钮var btns = $("button");//for循环进行遍历for(var i = 0; i < btns.length; i++) {//i控制他的下标确定的是那个按钮的点击事件btns[i]...
JS_js实现拖动DIV交换位置
小歪博客
09-13 940
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>拖.
使用jQuery实现两个div中按钮互换位置的实例代码
10-19
在本文中，我们将深入探讨如何使用jQuery来实现两个div中按钮的互换位置功能。这个实例对于理解jQuery的DOM操作和事件处理具有很好的实践意义。首先，我们需要了解jQuery库的基本用法，它是一个轻量级的JavaScript库...
用JavaScript实现用一个DIV来包装文本元素节点
01-19
就比如当我试图将文本(可能也包含HTML元素)用一个DIV元素包起来时。假设有以下HTML: This is some text and <a>a link 这时候如果想把它转换为下面这样: <div>This is some text and <a>a link</a><div> 最简单...
jQuery 实现两个div颜色互换的动画
12-30
至此，你已经成功地用jQuery实现了两个div颜色互换的动画效果。这个功能可以用于各种创意网页设计，比如按钮切换、游戏界面等。通过调整动画时间和颜色，你可以轻松定制出符合项目需求的效果。记得在实际项目中，将...
js 两个子节点互换位置_Vue.js 浅析（笔记整理）
weixin_36170009的博客
01-20 683
最近在逛各大网站、论坛、以及编程问答社区的时候，发现Vue.js异常火爆，重复性的提问和内容也很多，小编自己也趁着这个大前端的热潮，着手学习了一段时间的Vue.js什么是vue.jsVue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或...
jquery两个div互换_使用jQuery进行两个div的交换以及数据交换
weixin_39535349的博客
12-21 626
老师上课讲了对于两个div进行交换的例子，只能交换一次，在课后，我进行了“两个div可以交换多次”的研究对于两个div，一个红色100px，一个蓝色200px.使用拖拽功能可以进行交换div样式在style中，使用dragstart，dragover，drop进行绑定事件dragstart事件的定义如下：top.ondragstart=function(event){var data=event....
js玩转多个div互换
csdn_xpw的博客
09-18 1248
开胃菜代码是这样滴<!DOCTYPE HTML> <html> <head> <style type="text/css"> .divClass { float: left; width: 100px; height: 35px; margin: 10px;
JS案例 节点交换位置 swapNode兼容各浏览器
梦凝哲雪
09-19 1168
实现两个节点交换位置效果，发现IE特有的swapNode函数可以直接交换，但不适用于其他浏览器 IE中 a.swapNode(b) ， 其他则需自定义 swapNode(a,b) 此时需要考虑如何兼容，首先需要判断用户使用何种浏览器，以便调用对应函数 JS中Browser对象中 navigator(导航器)的userAgent(用户代理)包含浏览器相关信息 navigator.userAgent.indexOf("MSIE")<=0 HTML代码 <input type="button"
VUE、快应用 实现多个DIV上下移动随意交换位置
weixin_45791806的博客
02-17 2116
虚拟数据 SchoolObj: ['a','b','c'], template模板渲染数据（快应用和vue语法差不多） $idx：快应用的数据循环索引； 也可以写成for="{{(index,item) in SchoolObj}}"； <div for="{{item in SchoolObj}}" class="colleges-list"> <text>{{item}}</text> <text onclick="UpBtn($idx)"&gt
js调整两个div的先后顺序
qq_30351747的博客
09-01 749
js调整两个div的先后顺序
两个Canvas切换的问题
lq547854的专栏
09-30 1268
<br />在一个midlet中setCurrent()了一个Canvas类的对象c1，然后在c1中的keyPressed()的case FIRE:中想将屏幕转换到另外一个Canvas类的对象c2,该怎么写,具体原理哈,别光说setCurrent.如果回调midlet中的方法的话,在Canvas类中怎么标记midlet<br />我是菜鸟别见怪哈<br />public MyMIDlet extends MIDlet{<br /><br />  public static Display display;<
jsTree调整排序前端页面实现及遇到的一些问题
Zhu_daye的博客
05-14 1174
问题：刚刚完成了一个关于树（jsTree）节点的排序调整的功能（上移一个或者下移一个）。 解决思路：使用jsTree 中的move_node() 方法（移动节点到新的父节点）。获取到选中树节点（selectedNode）的索引值（selectedNodeIndex）及其父节点（ParentNode），然后使用move_node(selectedNode，ParentNode，newNodeIndex) 方法移动该节点其父节点的新位置即可。 move_node() API 解释如下：move_node (
js操作标签调换顺序,添加类似收款地址样式
u014218318的博客
01-31 1054
js远远不止如此的强大 直接上代码 html> head> meta charset="utf-8"> title>title> style> div.box{ width:300px; padding:20px; margin:20px; border:4px dashed #ccc; } d
vue实现div拖拽互换位置
最新发布
05-20
实现div拖拽互换位置可以使用Vue的拖拽指令`v-drag`，具体实现步骤如下： 1. 在Vue组件中引入`v-drag`指令。 ```javascript import vDrag from 'v-drag'; ``` 2. 在Vue组件中注册`v-drag`指令。 ```javascript export default { directives: { vDrag }, // ... } ``` 3. 在模板中使用`v-drag`指令，并绑定相应的事件。 ```html <template> <div v-drag class="drag-item" @dragstart="handleDragStart" @dragend="handleDragEnd"> Drag me! </div> </template> ``` 4. 在事件处理方法中获取相应的拖拽数据，并实现拖拽效果。 ```javascript export default { // ... methods: { handleDragStart(event) { event.dataTransfer.setData('text', event.target.id); event.target.classList.add('dragging'); }, handleDragEnd(event) { event.target.classList.remove('dragging'); }, }, // ... } ``` 5. 实现拖拽交换位置的功能。通过监听`dragover`事件，获取当前被拖拽元素和目标元素的位置信息，并进行位置交换。 ```javascript export default { // ... methods: { // ... handleDragOver(event) { event.preventDefault(); const draggingEle = document.querySelector('.dragging'); const dropzone = event.target.closest('.dropzone'); if (!dropzone || dropzone === draggingEle) { return; } const draggingRect = draggingEle.getBoundingClientRect(); const dropzoneRect = dropzone.getBoundingClientRect(); if (event.clientY > (dropzoneRect.top + dropzoneRect.height / 2)) { dropzone.parentNode.insertBefore(draggingEle, dropzone.nextElementSibling); } else { dropzone.parentNode.insertBefore(draggingEle, dropzone); } }, }, // ... } ``` 完整代码示例： ```html <template> <div> <div class="dropzone" @dragover="handleDragOver"> <div v-drag class="drag-item" @dragstart="handleDragStart" @dragend="handleDragEnd"> Drag me! </div> <div v-drag class="drag-item" @dragstart="handleDragStart" @dragend="handleDragEnd"> Drag me too! </div> </div> </div> </template> <script> import vDrag from 'v-drag'; export default { directives: { vDrag }, methods: { handleDragStart(event) { event.dataTransfer.setData('text', event.target.id); event.target.classList.add('dragging'); }, handleDragEnd(event) { event.target.classList.remove('dragging'); }, handleDragOver(event) { event.preventDefault(); const draggingEle = document.querySelector('.dragging'); const dropzone = event.target.closest('.dropzone'); if (!dropzone || dropzone === draggingEle) { return; } const draggingRect = draggingEle.getBoundingClientRect(); const dropzoneRect = dropzone.getBoundingClientRect(); if (event.clientY > (dropzoneRect.top + dropzoneRect.height / 2)) { dropzone.parentNode.insertBefore(draggingEle, dropzone.nextElementSibling); } else { dropzone.parentNode.insertBefore(draggingEle, dropzone); } }, }, }; </script> <style scoped> .drag-item { width: 100px; height: 100px; background-color: #ddd; margin: 10px; text-align: center; line-height: 100px; cursor: move; } .dragging { opacity: 0.5; } .dropzone { display: flex; flex-wrap: wrap; border: 2px dashed #aaa; padding: 10px; } </style> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值