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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 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编程最快明白》第三讲:php数组
2010/11/01 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
angular简介和其特点介绍
2015/01/29 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
Python tkinter label 更新方法
2018/10/11 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
人资专员岗位职责
2014/04/04 职场文书
书香家庭事迹材料
2014/05/09 职场文书
给客户的检讨书
2014/12/21 职场文书
营销计划书
2015/01/17 职场文书
违纪检讨书
2015/01/27 职场文书
英语辞职信怎么写
2015/02/28 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python
OpenCV全景图像拼接的实现示例
2021/06/05 Python
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
python基础之//、/与%的区别详解
2022/06/10 Python