jquery拖拽排序简单实现方法(效果增强版)


Posted in Javascript onFebruary 16, 2016

本文实例讲述了jquery拖拽排序简单实现方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

jquery拖拽排序简单实现方法(效果增强版)

原来没有新建动作,分析代码后发现很容易增强~~

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试的拖拽功能</title>
<style type="text/css">
body, div { margin: 0; paading: 0; font-size: 12px; }
body { width:100%; margin: 0 auto; }
ul, li { margin: 0; padding: 0; list-style: none; }
.clear { clear: both; width: 1px; height: 0px; line-height: 0px; font-size: 1px; }
.drag_module_box { width: 600px; height: auto; margin: 25px 0 0 0; padding: 5px; border: 1px solid #f00; }
.drag_module_box1 { width: 600px; height: auto; margin: 25px 0 0 0; padding: 5px; border: 1px solid #f00; }
.drag_module_main { position: static; width: 600px; height: 80px; margin-bottom: 5px; border: 1px solid blue; background: #ccc; }
.drag_module_maindash { position: absolute; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed blue; background: #ececec; opacity: 0.7; }
.drag_module_hide { width: 600px; height: 80px; margin-bottom: 5px; }
.drag_module_dash { position: sta;tic; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed #f00; };
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function () {
   var range = { x: 0, y: 0 };//鼠标元素偏移量
   var lastPos = { x: 0, y: 0, x1: 0, y1: 0 }; //拖拽对象的四个坐标
   var tarPos = { x: 0, y: 0, x1: 0, y1: 0 }; //目标元素对象的坐标初始化
   var theDiv = null, move = false;//拖拽对象 拖拽状态
   var theDivId =0, theDivHeight = 0, theDivHalf = 0; tarFirstY = 0; //拖拽对象的索引、高度、的初始化。
   var tarDiv = null, tarFirst, tempDiv; //要插入的目标元素的对象, 临时的虚线对象
  function loopbox(){ //循环初始化
     $(".drag_module_box").find(".drag_module_main").each(function(){
      console.log( 'find' );
       $(this).mousedown(function (event){
         //拖拽对象
         theDiv = $(this);
         //鼠标元素相对偏移量
         range.x = event.pageX - theDiv.offset().left;
         range.y = event.pageY - theDiv.offset().top;
         theDivId = theDiv.index();
         theDivHeight = theDiv.height();
         theDivHalf = theDivHeight/2;
         move = true;
         theDiv.attr("class","drag_module_maindash");
         // 创建新元素 插入拖拽元素之前的位置(虚线框)
         $("<div class='drag_module_dash'></div>").insertBefore(theDiv);
       });
     });
  }
  loopbox();
   $(".drag_module_box").mousemove(function(event) {
    console.log( 'mousemove' );
     if (!move) return false;
     lastPos.x = event.pageX - range.x;
     lastPos.y = event.pageY - range.y;
     lastPos.y1 = lastPos.y + theDivHeight;
     // 拖拽元素随鼠标移动
     theDiv.css({left: lastPos.x + 'px',top: lastPos.y + 'px'});
     // 拖拽元素随鼠标移动 查找插入目标元素
     var $main = $('.drag_module_main'); // 局部变量:按照重新排列过的顺序 再次获取 各个元素的坐标,
     tempDiv = $(".drag_module_dash"); //获得临时 虚线框的对象
     $main.each(function () {
       tarDiv = $(this);
       tarPos.x = tarDiv.offset().left;
       tarPos.y = tarDiv.offset().top;
       tarPos.y1 = tarPos.y + tarDiv.height()/2;
       tarFirst = $main.eq(0); // 获得第一个元素
       tarFirstY = tarFirst.offset().top + theDivHalf ; // 第一个元素对象的中心纵坐标
       //拖拽对象 移动到第一个位置
       if (lastPos.y <= tarFirstY) {
           tempDiv.insertBefore(tarFirst);
       }
       //判断要插入目标元素的 坐标后, 直接插入
       if (lastPos.y >= tarPos.y - theDivHalf && lastPos.y1 >= tarPos.y1 ) {
         tempDiv.insertAfter(tarDiv);
       }
     });
   }).mouseup(function(event) {
    console.log( 'mouseup' );
    if(theDiv==null) return false;
     theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上
     theDiv.attr("class", "drag_module_main"); //恢复对象的初始样式
     $('.drag_module_dash').remove(); // 删除新建的虚线div
     move=false;
   });
   $("#drag_module_insert").click(function(){
    $("#drag_module_box1").html($("#drag_module_box1").html()+$("#drag_module_box2").html());
    loopbox();
   });
   $("#drag_module_seque").click(function(){
    $(".drag_module_box").find(".drag_module_main").each(function(){
      console.log($(this).attr('id'));
    });
   });
});
</script>
</head>
<body>
<div class="drag_module_box" id="drag_module_box1">
   <div class="drag_module_main" id="main1">div1</div>
   <div class="drag_module_main" id="main2">div2</div>
   <div class="drag_module_main" id="main3">div3</div>
   <div class="drag_module_main" id="main4">div4</div>
   <div class="drag_module_main" id="main5">div5</div>
   <div class="drag_module_main" id="main6">div6</div>
</div>
<div class="drag_module_box1" id="drag_module_box2">
  <div class="drag_module_main" id="main_first">div7</div>
</div>
<input type="button" value="新建" id="drag_module_insert"/>
<input type="button" value="确定" id="drag_module_seque"/>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
全面了解js中的script标签
Jul 04 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 #Javascript
学习使用AngularJS文件上传控件
Feb 16 #Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 #Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 #Javascript
仅30行代码实现Javascript中的MVC
Feb 15 #Javascript
理解javascript中的with关键字
Feb 15 #Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 #Javascript
You might like
一个多文件上传的例子(原创)
2006/10/09 PHP
一个简单实现多条件查询的例子
2006/10/09 PHP
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
php 动态添加记录
2009/03/10 PHP
php 缩略图实现函数代码
2011/06/23 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
google地图的路线实现代码
2009/08/20 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
简洁的十分钟Python入门教程
2015/04/03 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
python与字符编码问题
2019/05/24 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
python提取xml里面的链接源码详解
2019/10/15 Python
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
企业新年寄语
2014/04/04 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
如何获取numpy array前N个最大值
2021/05/14 Python
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers