jquery 上下拖动div

最新推荐文章于 2024-06-13 15:49:37 发布

hssdxh

最新推荐文章于 2024-06-13 15:49:37 发布

阅读量601

点赞数

分类专栏： jquery

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的网页元素动态上下移动的功能，包括获取元素的父节点、计算元素在div1下的索引位置，并根据索引进行元素的前后移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

    <title>无标题页</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(function(){

$("#div1 div[id^=up]").bind("click",function(){

//得到当前元素的父节点div

    var p = $(this).parent();

//得到父节点div 在div1下面所有直接子节点中的索引

    var index = $("#div1 > div").index(p);

    if(index == 0){

        alert("已经在最上面");

return;

    }

    else{

        $("#div1 > div").eq(index-1).before($("#div1 > div").eq(index));

    }

});

$("#div1 div[id^=down]").bind("click",function(){

    var p = $(this).parent();

//得到div1 下面直接子节点div 的个数

    var count = $("#div1 > div").length;

    var index = $("#div1 > div").index(p);

    if(index == (count-1)){

        alert("已经在最下面");

return;

    }

    else{

        $("#div1 > div").eq(index+1).after($("#div1 > div").eq(index));

    }

});

}) ;

</script>

</head>

<body>

<div id="div1">

  <div>aaaaaaaaaaa

<div id="up1" style="cursor:pointer;">上</div>

<div id="down1" style="cursor:pointer;">下</div>

</div>

   <div>bbbbbbbbbbb

<div id="up2" style="cursor:pointer;">上</div>

<div id="down2" style="cursor:pointer;">下</div>

</div>

   <div>cccccccccc

<div id="up3" style="cursor:pointer;">上</div>

<div id="down3" style="cursor:pointer;">下</div>

</div>

</div>

</body>

</html>