简单的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 相关文章推荐
关于javascript中this关键字(翻译+自我理解)
Oct 20 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 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
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
php 删除cookie方法详解
2014/12/01 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
JS与C#编码解码
2013/12/03 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
js中let能否完全替代IIFE
2019/06/15 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python遍历数组的方法小结
2015/04/30 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
一个入门级python爬虫教程详解
2021/01/27 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
最新的大学生找工作自我评价
2013/09/29 职场文书
公司出纳岗位职责
2013/12/07 职场文书
商务经理岗位职责
2014/07/30 职场文书
服务明星事迹材料
2014/12/29 职场文书
安全教育片观后感
2015/06/17 职场文书