简单的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 相关文章推荐
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
php文件操作实例代码
2012/05/10 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
javascript实现密码验证
2015/11/10 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
遗传算法之Python实现代码
2017/10/10 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
同学聚会策划方案
2014/06/06 职场文书
小学运动会演讲稿
2014/08/25 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
张丽莉观后感
2015/06/16 职场文书
结婚主持人致辞
2015/07/28 职场文书