<!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: 960px; 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; }

		.box { width: 600px; height: auto; margin: 25px 0 0 0; padding: 5px; border: 1px solid #f00; }

		.main { position: static; width: 600px; height: 80px; margin-bottom: 5px; border: 1px solid blue; background: #ccc; }

		.maindash { position: absolute; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed blue; background: #ececec; opacity: 0.7; }

		.hide { width: 600px; height: 80px; margin-bottom: 5px; }

		.dash { position: sta;tic; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed #f00; };

	</style>

	<script type="text/javascript" src="jquery.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;  //要插入的目标元素的对象, 临时的虚线对象

	    $(".main").each(function(){

	    	$(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","maindash");

	            // 创建新元素 插入拖拽元素之前的位置(虚线框)

	            $("<div class='dash'></div>").insertBefore(theDiv);

	        });

	    });

	    $(document).mousemove(function(event) {

	    	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 = $('.main'); // 局部变量：按照重新排列过的顺序  再次获取 各个元素的坐标，

	        tempDiv = $(".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) {

	        theDiv.insertBefore(tempDiv);  // 拖拽元素插入到 虚线div的位置上

	        theDiv.attr("class", "main"); //恢复对象的初始样式

	        $('.dash').remove(); // 删除新建的虚线div

	        move=false;

	    });

	});

</script>

</head>

<body>

	<div class="box" id="box">

		<div class="main" id="main0">div1</div>

		<div class="main" id="main1">div2</div>

		<div class="main" id="main2">div3</div>

		<div class="main" id="main3">div4</div>

		<div class="main" id="main4">div5</div>

	</div>

</body>

</html>

　　

jQuery 鼠标拖拽排序的更多相关文章

  1. jQuery可拖拽排序列表jquery-sortable-lists

    jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...

  2. jquery sortTable拖拽排序

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ...

  3. jQuery 鼠标拖拽移动窗口

    拖拽移动需要注意的是:拖拽移动的窗口是如何定位的,如果"left"属性为"%" ,以"margin-left"来计算定位,如下实例,如果&q ...

  4. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

  5. jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）

    现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码, ...

  6. 完美实现鼠标拖拽事件，解决各种小bug，基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

  7. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

  8. dragsort html拖拽排序

    一.Jquery List DragSort 对于有些页面,如首页的定制,需要进行动态的拖拽排序.由于自己实现比较困难,我们一般会使用一些js插件来实现.dragsort 就是帮助我们完成这一需求.通 ...

  9. 使用knockout-sortable实现对自定义菜单的拖拽排序

    在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需 ...

随机推荐

  1. 【转】Android中的内存管理--不错不错，避免使用枚举类型

    原文网址:http://android-performance.com/android/2014/02/17/android-manage-memory.html 本文内容翻译自:http://dev ...

  2. 尚学堂 JAVA Day3 概念总结

    java中的运算符 1.算术运算符 + - * / % Arithmetic operators + 运算符有三种身份 Additive Operator 1)加法:如 a + b; 2)连接:如 “ ...

  3. G - Arctic Network - poj2349

    在北极圈有一些基地,这些基地需要建立通讯网络,他们可以通过卫星直接通信或者无线通信,基地有S个卫星,N个基地,不过无线通信的传输距离是D,距离越远费用越高,现在想知道D最小是多少. 分析:使用krus ...

  4. View Controller 生命周期的各个方法的用法

    (void)awakeFromNib; 这个方法用的时候,outlet还没有连接起来,是view Controller刚从storyboard建的时候,没有完全建好,不过可能有一些事情要在这个方法里面 ...

  5. AIX Study之--AIX网卡配置管理（ent0、en0、et0）

    AIX Study之--AIX网卡配置管理(ent0.en0.et0) 1.查看AIX系统网卡信息: [root@aix211 /]#lsdev |grep et  en0 Available 1L- ...

  6. Amoeba是一个类似MySQL Proxy的分布式数据库中间代理层软件，是由陈思儒开发的一个开源的java项目

    http://www.cnblogs.com/xiaocen/p/3736095.html amoeba实现mysql读写分离 application  shang  2年前 (2013-03-28) ...

  7. 苹果Swift编程语言新手教程【中国版】

    Swift代码语言教程:在刚刚过去的WWDC2014大会上,苹果公司新公布了一种编程语言Swift.据悉.Swift语言继承了C语言以及Objective-C的特性,且克服了C语言的兼容性问题.对于广 ...

  8. 使用glob()查找文件(转)

    大部分PHP函数的函数名从字面上都可以理解其用途,但是当你看到 glob() 的时候,你也许并不知道这是用来做什么的,其实glob()和scandir() 一样,可以用来查找文件,请看下面的用法:  ...

  9. txt文件导入mysql--转

    MySQL写入数据通常用insert语句,如 insert into person values(张三,20),(李四,21),(王五,70)…; 但有时为了更快速地插入大批量数据或交换数据,需要从文 ...

  10. [转] GDB attach

    转:http://blog.csdn.net/wangeen/article/details/14230171 attach是GDB一种重要的debug模式,在MPI程序debug中发挥重要的作用. ...