简单的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 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
详解React-Todos入门例子
Nov 08 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
浅谈Vue的响应式原理
May 30 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 Javascript
详解CocosCreator项目结构机制
Apr 14 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
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
javascript数组去重小结
2016/03/07 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
python判断完全平方数的方法
2018/11/13 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
质量提升方案
2014/06/16 职场文书
2014年工程工作总结
2014/11/25 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
python 常用的异步框架汇总整理
2021/06/18 Python
使用Java去实现超市会员管理系统
2022/03/18 Java/Android