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 相关文章推荐
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 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
使用php shell命令合并图片的代码
2011/06/23 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
js实现分页功能
2017/05/24 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
Python数据结构之翻转链表
2017/02/25 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
Python实现的桶排序算法示例
2017/11/29 Python
Python切片操作实例分析
2018/03/16 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
EJB实例的生命周期
2016/10/28 面试题
一年级学生评语大全
2014/04/21 职场文书
电视节目策划方案
2014/05/16 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
社会实践活动总结
2015/02/05 职场文书
教师工作表现自我评价
2015/03/05 职场文书
停电通知范文
2015/04/16 职场文书
大学生逃课检讨书
2015/05/04 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang
python井字棋游戏实现人机对战
2022/04/28 Python