简单的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 相关文章推荐
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
vue界面发送表情的实现代码
Sep 11 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
怎样在php中使用PDF文档功能
2006/10/09 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
php之可变变量的实例详解
2017/09/12 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
移动节点的jquery代码
2014/01/13 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
通俗讲解python 装饰器
2020/09/07 Python
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
代理班主任的自我评价
2014/02/04 职场文书
法定代表人授权委托书
2014/04/04 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
高中生逃课检讨书
2014/10/10 职场文书
学校实习推荐信
2015/03/27 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript