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

 更新时间:2016年02月16日 09:01:11   作者:bayaci  
这篇文章主要介绍了jquery拖拽排序简单实现方法,涉及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相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery常用操作技巧汇总

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

相关文章

  • jquery获取easyui日期控件的值实现方法

    jquery获取easyui日期控件的值实现方法

    下面小编就为大家带来一篇jquery获取easyui日期控件的值实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • jQuery filter函数使用方法

    jQuery filter函数使用方法

    利用filter函数可以从wrapper set中过滤符合条件的DOM元素,下面是其具体的用法,希望对大家有所帮助
    2014-05-05
  • jqueyr判断checkbox组的选中(示例代码)

    jqueyr判断checkbox组的选中(示例代码)

    jqueyr判断checkbox组的选中示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • jquery动态增加删减表格行特效

    jquery动态增加删减表格行特效

    这篇文章主要介绍了jquery动态增加删减表格行特效实现代码,
    2015-11-11
  • 使用jquery的jsonp如何发起跨域请求及其原理详解

    使用jquery的jsonp如何发起跨域请求及其原理详解

    JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过JavaScript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。下面这篇文章主要给大家介绍了关于使用jquery的jsonp如何发起跨域请求及其原理的相关资料,需要的朋友可以参考下。
    2017-08-08
  • jquery插件corner实现圆角边框的方法

    jquery插件corner实现圆角边框的方法

    这篇文章主要介绍了jquery插件corner实现圆角边框的方法,实例分析了jQuery插件corner的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • jQuery封装的获取Url中的Get参数示例

    jQuery封装的获取Url中的Get参数示例

    js的纯前台处理时会遇到将一个网页的参数,通过get方式,传递给下一个页面的问题,此时可以获取Url中的Get参数,具体如下,需要的朋友可以参考下
    2013-11-11
  • 查看源码的工具 学习jQuery源码不错的工具

    查看源码的工具 学习jQuery源码不错的工具

    jQuery是一个非常好用的javascript框架,我尤其喜欢它强大的选择器和链式表达式,使得我们能通过简单的语句实现复杂的功能。它还有一个重要的特点就是它的可扩展性,使得很多人都可以开发他们的插件并且分享出来
    2011-12-12
  • 精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程

    精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程

    当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换。借助流行的 jQuery 框架,只需很少的代码就可以实现精美的手风琴效果,帮助你的网站吸引更多用户的眼球
    2012-08-08
  • jquery 获取select数组与name数组长度的实现代码

    jquery 获取select数组与name数组长度的实现代码

    下面小编就为大家带来一篇jquery 获取select数组与name数组长度的实现代码。小编觉得挺不错的, 现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06

最新评论