jquery 上下拖动div

最新推荐文章于 2024-06-13 15:49:37 发布
最新推荐文章于 2024-06-13 15:49:37 发布
阅读量557 收藏
点赞数
分类专栏： jquery
<!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 >
hssdxh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现div上下移动
05-05
jquery实现div上下移动 上移 下移 内容一 上移 下移 内容二
jQuery鼠标上下拖动div排序代码
06-10
jQuery鼠标上下拖动div排序代码、鼠标拖动层改变排列顺序，div左上角还有按钮操作，点击只是弹窗提示效果。
div上下拖拽（resize）
渐变强的小刘
04-21 2954
实现拖拽的方式有很多种，css实现可能不是最好的实现方式，仅供参考。 话不多说，先上图 需求介绍：主要实现的是 中间区域（红框）内可以托住上下拖动. 功能实现所需： resize: css3新增属性，放在div上即可使其可以拖拽，详见:resize介绍文档(https://www.w3school.com.cn/cssref/pr_resize.asp) cursor:ns-resize，上下拖拽鼠标图标.详见：[cursor属性](https://developer.mozilla.org/zh.
拖拽实现div上下互换
最新发布
m0_73008551的博客
06-13 202
因为我这个结构是通过for循环出来的,所以使用transition-group标签进行包裹,class采用动态标识处理避免初始化页面的动画效果,因为禁用初始动画的配置项在我这里不适用,大家可以自行设置;
jQuery上下拖拽排序插件
ICode联盟
09-10 189
下载地址jQuery上下拖拽排序插件是一款通过鼠标拖动上下层排序，编辑按钮等操作代码。 dd:
可上下左右拖动的jQuery分割div容器插件
12-10
split.js是一款可上下左右拖动的jQuery分割div容器插件。该插件可以实现父容器div的上下左右动态分割，并可以上下改变父div的高度，而且宽和高都是按百分比计算。
jQuery鼠标上下拖动div排序代码.zip
09-21
《jQuery实现鼠标上下拖动div排序的技术解析》 在网页开发中，用户交互性是提升用户体验的关键因素之一。本文将详细解析"jQuery鼠标上下拖动div排序代码.zip"中的技术要点，帮助开发者理解和应用这一实用功能。 ...
jquery div拖动排序效果代码.zip
07-04
本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果，结合CSS样式，创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先，我们需要在HTML中设置好基础结构。创建一系列的div元素，每个div代表一个...
jquery拖动改变div大小
10-19
### jQuery拖动改变div大小的核心知识点 1. **jQuery基础** jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过提供一个API来简化HTML文档遍历和操作、事件处理、动画和Ajax，使得Web开发变得更加简单。 2...
Jquery Sortable实现div拖动排序效果
10-27
本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先，你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库，而 jQuery UI 提供了包括Sortable在内的多种...
jquery实现上下移动div可以用这种方法
weixin_30817749的博客
07-17 331
//上移 $('.add_small_wrap').on('click', '.shangyi', function(){ var $curBlock = $(this).parents('.add_small'); var $prveBlock = $curBlock.prev('.add_small'); $curBlock.after($prveBlock); })...
DIV上下移动
03-19
源码 博文链接：https://helly2115.iteye.com/blog/734165
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”);
js实现DIV拖拽布局
09-08
js实现DIV拖动布局，可以用来实现自定义桌面
jq实现上下滑动效果
10-01
jq实现页面的上下滑动效果是非常实用的，上下滑动翻页在实际的开发当中也是非常常见的
php ajax实现上移,Jquery实现Div上下移动示例_jquery
weixin_42374596的博客
03-17 62
$(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;$("....
写几款Jquery插件 (评分,拖拽分页(可分上下左右))
Seven Blog
05-30 2338
 最近不知道怎么搞的,想写点复杂的吧,一伸手脑袋顿时充满着糨糊...索性去看看别人的博客,可一上来少说就是100行代码,也没耐心去看,心静不下来..没办法,逼自己随便写点东西,不能这么空白下去.. 下面是在网上随意找了几个效果,实现一下 练练手.. 评分插件   共三个参数 参数一：总数量 参数二：选中数量 参数三：回
div js 拖拽方法
leixu1027的博客
05-31 328
        找到  id    dragElement(elmnt) // elmnt就是id， 执行方法    dragElement(elmnt) { let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id)) { ...
jquery 拖动 div 边框
08-06
jquery是一个JavaScript库，它...总结起来，通过使用jquery的draggable和resizable方法，我们可以实现拖动div元素和拖动div边框的功能。这样可以为网页添加更加灵活的交互效果，使用户能够自由调整元素的位置和尺寸。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值