jquery实现div上下移动

最新推荐文章于 2022-07-23 13:33:31 发布
最新推荐文章于 2022-07-23 13:33:31 发布
阅读量664 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jyb2014/article/details/42524527
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="yidiao/_mz/js/jquery-1.7.2.min.js"></script>
<style>
   .pt{
 line-height:22px;
 width:280px;   
   }
   div a{
 float:right ;
 margin-right:5px;   
   }
</style>
<script>
    function up(obj){
   var _div = $(obj).parent() ,
   _divp = _div.parent() ,
_divs = _divp.children("div") ,
_divindex = _divs.index(_div);

if(_divindex>0){
  _divs.eq(_divindex-1).before(_div);
}
}
function down(obj){
var _div = $(obj).parent() ,
   _divp = _div.parent() ,
_divs = _divp.children("div") ,
_divindex = _divs.index(_div);

if(_divindex<_divs.length-1){
   _divs.eq(_divindex+1).after(_div);
}
}
</script>
</head>


<body>
   <div>
      <div class="pt">
        <a href="javascript:;" οnclick="up(this);">上移</a>
        <a href="javascript:;" οnclick="down(this);">下移</a>
        <span>内容一</span>
      </div>
      <div class="pt">
        <a href="javascript:;" οnclick="up(this);">上移</a>
        <a href="javascript:;" οnclick="down(this);">下移</a>
        <span>内容二</span>
      </div>
      <div class="pt">
        <a href="javascript:;" οnclick="up(this);">上移</a>
        <a href="javascript:;" οnclick="down(this);">下移</a>
        <span>内容三</span>
      </div>
      <div class="pt">
        <a href="javascript:;" οnclick="up(this);">上移</a>
        <a href="javascript:;" οnclick="down(this);">下移</a>
        <span>内容四</span>
      </div>
   </div>
</body>
</html>
jyb2014
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery实现Div上下移动示例
12-03
代码如下: $(this).ready(function() { $(“.up”).each(function() { $(this).click(function() { var $tr = $(this).parents(“li”); if ($tr.index() != 0) { $tr.prev().before($tr); } }); }); var trLength = $(“.down”).length; $(“.down”).each(function() { $(this).click(function() { var $tr = $(this).parents(“li”);
jQuery实现上移,下移效果
最新发布
m0_66722601的博客
12-02 914
jQuery实现上移,下移效果
（四）jQuery实现元素向上向下滑动效果
北斗星的爱886的博客
06-30 2287
1、slideDown（）方法 slideDown() 方法用于向下滑动元素。 $("button").click(function(){ $("#div").slideDown(); }); 2、slideUp（）方法 slideUp() 方法用于向上滑动元素。 $("button").click(function(){ $("#div").slideUp(); }); 3、slideToggle（）方法 slideToggle() 方法可以在 slideDown() 与 slide
jquery实现列表上下移动功能
12-28
今天我们实现的是一个列表页面上移、下移功能。如图： 当勾选列表中的列时，点击上移或者下移，会动态上移或者下移。 html代码如下： <div> <input type=button onclick=up(); value= 上移 > <input ...
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
10-18
主要介绍了jQuery实现通过方向键控制div块上下左右移动的方法,涉及jQuery结合键盘事件响应动态修改页面元素属性相关操作技巧,需要的朋友可以参考下
jQuery实现上移、下移、置底、置顶、新增删除按钮的显示隐藏
weixin_45591598的博客
07-23 995
代码】jQuery实现上移、下移、置底、置顶、新增删除按钮的显示隐藏。
用jQuery实现div的上下左右移动
qq_36727889的博客
03-09 5104
html代码 &lt;input type="button" value="向左" id="left"&gt; &lt;input type="button" value="向右" id="right"&gt; &lt;input type="button" value="向上" id=&qu
jquery实现上下移动
05-15
选择表格中的内容，按上下键调整顺序，序号也随之变动。
JS实现元素上下左右移动效果
11-26
本文实例为大家分享了JS实现元素上下左右移动的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { cursor: pointer; } #cell { width: 30px; height: 30px; background: red; position: relative; left: 0; top: 0; } </style> </head>
JQuery 使用animate让DIV变化或左右移动
04-13
NULL 博文链接：https://sunyf.iteye.com/blog/1717465
Jquery Div上下移动示例
vip_linux的专栏
04-24 2411
介绍了Jquery如何实现Div上下移动,。 复制代码代码如下: $(this).ready(function() {  $(".up").each(function() {  $(this).click(function() {  var $tr = $(this).parents("li");  if ($tr.index() != 0) {  $tr.prev().
jquery 实现列表上移、下移功能
小菜鸟的博客
02-03 1万+
由于比较忙，好久没写新的文章了，虽然本人写的文章可能对一些高手来说是小菜一碟，但是对于新手来说还是比较难得，重在为和我一样的小菜鸟提供一个简单的实现方法，以及一个思路罢了。        那么，废话少说，我们开始进入主题。       今天我们实现的是一个列表页面上移、下移功能。如图：        当勾选列表中的列时，点击上移或者下移，会动态上移或者下移。 html代码如下：
Jquery Div上下移动
xf_scce的专栏
04-22 1281
$(this).ready(function() {         $(".up").each(function() {             $(this).click(function() {                 var $tr = $(this).parents("li");                 if ($tr.index() != 0) {      
使用jquery实现上下左右移动效果
WhoWrongsWhere的专栏
05-29 3214
1                 2                 3                 4                 5                 6                 7                 8                 9                 10                 11      
div+css 上下左右移动
热门推荐
wtt561111的专栏
01-16 6万+
利用div+css，使得选中的对象，上下左右进行位置移动。
jquery实现节点上移、下移
llkui
06-09 6656
$().prop('outerHTML')$().html()方法是获取当前节点下的html代码，但并不包括当前节点， js dom里有一个属性outerHTML用来获取当前节点的html代码（包括当前节点），通过jquery的prop()方法可以拿到， 具体实现代码如下 jquery实现节点上移、下移 下移 上移

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值