简单的jQuery拖拽排序效果的实现(增强动态)


Posted in Javascript onFebruary 09, 2017

增强动态增加Div效果

简单的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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 <script type="text/javascript"> 
 $(document).ready( function () { 
  //来源:http://www.cnblogs.com/web-ed2/archive/2011/09/19/2181819.html 
   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>
Javascript 相关文章推荐
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 #Javascript
js 原型对象和原型链理解
Feb 09 #Javascript
AngularJs表单校验功能实例代码
Feb 09 #Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 #Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 #Javascript
简单谈谈Javascript函数中的arguments
Feb 09 #Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 #Javascript
You might like
基于mysql的论坛(4)
2006/10/09 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
django 创建过滤器的实例详解
2017/08/14 Python
Python 多线程的实例详解
2017/09/07 Python
python如何定义带参数的装饰器
2018/03/20 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
学习Django知识点分享
2019/09/11 Python
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
怎样自定义一个异常类
2016/09/27 面试题
行政助理求职自荐信
2013/10/26 职场文书
大学生秋游活动方案
2014/02/17 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
浅析Python中的套接字编程
2021/06/22 Python
Python 数据可视化之Bokeh详解
2021/11/02 Python
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js