jquery拖拽排序简单实现方法(效果增强版)


Posted in Javascript onFebruary 16, 2016

本文实例讲述了jquery拖拽排序简单实现方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

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="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function () {
   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>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery技巧总结
Jan 01 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
vue实现商城购物车功能
Nov 27 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
详解vue v-model
Aug 31 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 #Javascript
学习使用AngularJS文件上传控件
Feb 16 #Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 #Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 #Javascript
仅30行代码实现Javascript中的MVC
Feb 15 #Javascript
理解javascript中的with关键字
Feb 15 #Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 #Javascript
You might like
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
PHP里的单例类写法实例
2015/06/25 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
清空上传控件input file的值
2010/07/03 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
Javascript访问器属性实例分析
2014/12/30 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
Django rest framework基本介绍与代码示例
2018/01/26 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
详解python中的hashlib模块的使用
2019/04/22 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
音乐教育感言
2014/03/05 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
邀请函模板
2015/02/02 职场文书
中英文求职信范文
2015/03/19 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
学校会议通知范文
2015/04/15 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python