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

最新推荐文章于 2023-03-07 16:49:36 发布
最新推荐文章于 2023-03-07 16:49:36 发布
阅读量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
    评论
使用jQuery实现两个div中按钮互换位置的实例代码
10-19
在本文中，我们将深入探讨如何使用jQuery来实现两个div中按钮的互换位置功能。这个实例对于理解jQuery的DOM操作和事件处理具有很好的实践意义。首先，我们需要了解jQuery库的基本用法，它是一个轻量级的JavaScript库...
js的节点交换
qq_36155035的博客
02-27 1091
                                       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之间互换位置
漫天随飞雪的博客
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;
jquery两个div互换_jQuery实现两个div中按钮互换位置详解
weixin_39571749的博客
12-21 491
本文主要介绍了使用jQuery实现两个p中按钮互换位置的实例代码,需要的朋友可以参考下，希望能帮助到大家。效果如下代码如下：$(function() {//定义一个变量等于所有button按钮var btns = $("button");//for循环进行遍历for(var i = 0; i < btns.length; i++) {//i控制他的下标确定的是那个按钮的点击事件btns[i]...
js实现两个div交换位置
热门推荐
longlongxue的专栏
09-17 1万+
同事问了一个问题，就是关于两个层交换位置的问题，其实实现起来很简单，我在这里简单的列举两种方法： 方法一：这里只是用的纯js来实现，我直接贴代码，其中前面是判断是否兼容fixfox function moveDiv(id_1,id_2)  //参数传递的是你需要交换位置的两个div的ID {     var insert = function(nodeInsert,nodeTo){
JavaScript-DOM增、删、改节点
十二的博客
04-22 829
JavaScript-DOM增、删、改节点
jsTree调整排序前端页面实现及遇到的一些问题
Zhu_daye的博客
05-14 1174
问题：刚刚完成了一个关于树（jsTree）节点的排序调整的功能（上移一个或者下移一个）。 解决思路：使用jsTree 中的move_node() 方法（移动节点到新的父节点）。获取到选中树节点（selectedNode）的索引值（selectedNodeIndex）及其父节点（ParentNode），然后使用move_node(selectedNode，ParentNode，newNodeIndex) 方法移动该节点其父节点的新位置即可。 move_node() API 解释如下：move_node (
用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颜色互换的动画效果。这个功能可以用于各种创意网页设计，比如按钮切换、游戏界面等。通过调整动画时间和颜色，你可以轻松定制出符合项目需求的效果。记得在实际项目中，将...
VUE、快应用 实现多个DIV上下移动随意交换位置
weixin_45791806的博客
02-17 2124
虚拟数据 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
交换两个div的位置
04-24
点击事件触发，交换两个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;<
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
div拖拽互换位置
lxrbaf的博客
06-20 684
如题
使div可以根据不同的方向键向不同的方向移动
xiaoxingxingzai的博客
11-11 413
元素想动一定要开启定位！！！！ <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } </style> <script type="t...
JS实现拖拽元素交换位置
weixin_46949106的博客
03-07 1720
源码： js-essays/draggable使元素可以被拖拽（利用 draggable 属性， 注意：链接和图片默认是可拖拽的） 拖拽时，通过被拖拽节点和其他节点的drag事件交互，来切换两个节点的位置（非唯一方法） 添加用户拖拽交互效果ondrag 事件在元素或者选取的文本被拖动时触发。在拖动目标上触发(源目标元素):ondragstart - 用户开始拖动元素 ondrag - 元素正在被拖动 ondragend - 用户结束元素拖动 释放目标时触发的事件:ondragenter - 当被拖动的对象进
JS实现多个DIV上下移动随意交换位置
weixin_45791806的博客
02-15 2565
<!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>JS实
JS_js实现拖动DIV交换位置
小歪博客
09-13 942
<!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>拖.
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、付费专栏及课程。

余额充值