jquery移动元素位置

最新推荐文章于 2024-04-18 13:21:59 发布
最新推荐文章于 2024-04-18 13:21:59 发布
阅读量6k 收藏 2
点赞数 1
分类专栏： JS
ele.parent() : 获取一个元素的临近的父级
ele.prev() :获取在其上面的临近兄弟节点
ele.next() :获取在其下面的临近的兄弟节点
ele.before(): 设置元素的前一元素是什么
ele.after():设置元素的后一元素是什么

js：
<script type="text/javascript">
$(document).ready(function(){
$("#btnPrevious").bind("click",function(){ toPrevious(); })
$("#btnAfter").bind("click",function(){ toAfter(); })
});
function toPrevious(){
$("#div2").prev().css("background", "yellow");
      $("#div2").prev().before($("#div2"));
}
function toAfter(){
      $("#div2").next().after($("#div2"));
}
</script>

HTML：
<body>
<div>
<div id="div1">11111</div>
<div id="div2">22222</div>
</div>
<div>
<input type="button" id="btnPrevious" value="向前" />
<input type="button" id="btnAfter" value="向后"/>
</div>
</body>
</html>


补充：
也可使用$("# div1").insertAfter($("# div2"));
$("# div2").insertBefore($("# div1"));

Leon20160711
关注
专栏目录
JQuery实现鼠标拖动元素移动位置
TendeRneSs.宸的博客
04-18 9092
JQuery实现元素移动位置有很多种方法，其中一个是根据鼠标在指定区域内随意移动，还有一种的是根据方向键在一定区域内上下左右平移。这二种只能说各有优劣，通过方向键平移，实现相对简单，操作也更具备可控性，但是就是移动效率相对较低，每次平移量过大造成不够精准，平移量过小则会使移动过程更为繁琐。跟随鼠标自由移动，可以自由控制平移量，精准的移动到自己想要的位置，但是实现较为复杂，并且控制过程中容易出现体验卡
jquery中点击某元素后滚动条滚动到某元素位置或底部
euxil97的博客
08-14 6268
//首先获取文档对象 var target; if(document.documentElement.scrollTop){ target=$("html"); }else{ target=$("body"); }//到某元素$("#nu").on("click",function(e){ e.preventDefault(); var timer=setInter
JQuery实现鼠标拖动元素移动位置（源码+注释）
08-07
NULL 博文链接：https://mingzijian.iteye.com/blog/2100589
jQuery之元素移动
F_linlin的博客
10-24 8449
　如果要移动选中的元素，有两种方法：一种是直接移动该元素，另一种是移动其他元素，使得目标元素达到我们想要的位置。 　　假定我们选中了一个div元素，需要把它移动到p元素后面。 　　第一种方法是使用.insertAfter()，把div元素移动p元素后面： 代码: $('div').insertAfter('p'); 　第二种方法是使用.after()，把p元素加到div元素前面： 代码:...
JQuery 拖拽元素,并移动其他元素位置
zhang_g_b_930830的博客
12-11 2986
JQuery 拖拽元素,并移动其他元素位置 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;拖动元素,并移动其他元素&amp;lt;/title&amp
jQuery 实现DOM元素拖拽交换位置的实例代码
10-15
在代码中，会涉及到如何获取元素索引、如何存储和更新元素位置、如何触发 DOM 的重新渲染等操作。 #### 5. 最佳实践和注意事项 最佳实践包括代码的模块化、事件的合理解绑、性能优化（减少 DOM 操作、使用事件委托...
jquery元素跟随鼠标移动特效代码
03-20
标题 "jquery元素跟随鼠标移动特效代码" 涉及的核心知识点是使用JavaScript库jQuery实现一个交互效果，即页面上的特定元素能随着鼠标的移动而动态调整位置。在网页设计和开发中，这样的特效可以增强用户体验，使用户...
jquery 把元素移动到另外一个元素里面
hzm博客
03-17 1869
$("#ew-datagrid-page-InquiryGrid").detach().appendTo("#newpage");
JS移动某些元素到指定位置
热门推荐
MOONCOM的博客
06-15 1万+
一、点击按钮实现页面中的某些元素移动到 指定区域（根据用户输入）/ 规定区域（代码中写死的） 通过 document.getElementById("demo").appendChild(document.getElementById("test")); 来实现 注意：1、也可以通过 getElementsByClassName() 等来实现； 2、这里的事件，除了appendChild
JQuery拖放，拖拽到指定的位置，拖拽元素，鼠标拖动
06-20
JQuery拖放，拖拽到指定的位置，拖拽元素，鼠标拖动元素到指定的对应位置
采用纯js方式实现网页DIV元素的动态拖动及位置移动操作程序
09-18
采用纯js方式实现网页DIV元素的动态拖动及位置移动操作程序
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
10-26
jQuery获得页面元素的绝对X,Y坐标，可以用offset()方法，下面有个不错的坐标大家可以参考下
jquery获取html元素的绝对位置和相对位置的方法
10-25
主要介绍了jquery获取html元素的绝对位置和相对位置的方法,需要的朋友可以参考下
jQuery移动和复制dom节点实用DOM操作案例
12-12
本文章简单的介绍了关于jQuery移动和复制dom节点程序实现，有需要学习的朋友可参考参考。 在做一个项目时，需要dom节点移动，如以下代码： 代码如下:<div></div> <p></p>需要把p标签移动到div标签里，经过测试发现，在jQuery中移动dom节点非常方便： 代码如下:$(‘div’).append($(‘p’))这样即可把p标签移动到div标签里，千万不要写成这样： 代码如下:$(‘div’).append( $(‘p’).html() )这样只是把p标签里的内容复制到div标签里。 如果只是复制一份到div标签里，原来的标签还保留着，那么可以这么写： 代码如下:$(‘d
12. jQuery 操作元素位置
Bi-Hu的博客
05-26 177
jQuery 操作元素位置　　操作元素相对于某一个点的位置关系 这里主要讲两个方法： 1.offset　　　　 2.position 1. 　　offset() + 是一个读写的方法1. 读取 => 语法: 元素集合.offset() => 返回值: 一个对象, 里面包含一个 x 信息一个 y 信息　　(即 只有 top 和 lef...
使用jQuery将元素移动到另一个元素中
qq_37117258的博客
10-14 4132
想要使用jQuery将元素移动到另一个元素中，可以使用jQuery的内置方法append()或prepend()。下面本篇文章就来给大家介绍一下，希望对大家有所帮助。 方法1：使用append()方法 jQuery的append()方法用于在所选元素的末尾插入一些内容。 语法： $(selector).append( content, function(index, html) ) ...
前端js控制元素移动
最新发布
qq_45840993的博客
04-18 629
不使用定时器js控制元素从右至左匀速滚动，直至内部元素滚动出可视范围
jQuery移动节点
何明洋的编程技术博客
07-03 742
insertafter移动节点例子：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;title&gt;&lt;/title&gt; &lt;meta c
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值