<!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. RAM区间最值

    RMQ (Range Minimum/Maximum Query)问题是指:对于长度为n的数列A,回答若干询问RMQ(A,i,j)(i,j<=n),返回数列A中下标在i,j里的最小(大)值,也就 ...

  2. 男装电商Bonobos融资5500万美元，计划IPO，全靠体验店战略 - 国外 - 快鲤鱼

    男装电商Bonobos融资5500万美元,计划IPO,全靠体验店战略 - 国外 - 快鲤鱼 男装电商Bonobos融资5500万美元,计划IPO,全靠体验店战略

  3. K - Treasure Exploration - POJ 2594（最小路径覆盖+闭包传递）

    题意:给一个有向无环图,求出来最小路径覆盖,注意一个点可能会被多条路径重复 分析:因为有可能多条路径走一个点,可又能会造成匹配的不完全,所以先进行一次闭包传递(floyd),然后再用二分匹配的方法求出 ...

  4. spring mvc model.addAttribute页面c:forEach取不到

    昨天和今天都在解决一个问题,即: @RequestMapping(value = "/listAccounts", method = RequestMethod.GET) publ ...

  5. jsonp突破同源策略，实现跨域访问请求

    跨域访问问题,相信大家都有遇到过.这是一个很棘手的问题.不过道高一尺,魔高一丈,对于这类问题,总有解决问题的方案.最近我又接触到了这个问题,解决的途径是ajax+jsonp. 说到这个问题,不得不说一 ...

  6. java的Comparator和Comparable

    java的Comparator和Comparable 当需要排序的集合或数组不是单纯的数字型时,通常可以使用Comparator或Comparable,以简单的方式实现对象排序或自定义排序.      ...

  7. poj 1012 Joseph (约瑟夫问题）

    Joseph Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 47657   Accepted: 17949 Descript ...

  8. Easyui弹出窗体在iframe的父级页面显示

    今天做EasyUI学习的预到了一个这样的问题:通过iframe加载的一个页面在调用$.messager.alert();这个方法后只能在iframe中显示alert效果而不是在全局的页面上显示这并不我 ...

  9. php开发中将远程图片本地化的方法

    检查文本内容中的远程图片,下载远程图片到本地的方法示例. /** * 下载远程图片到本地 * * @param string $txt 用户输入的文字,可能包含有图片的url * @param str ...

  10. Java基础知识强化93：算一下你来到这个世界多少天的案例

    1. 分析: (1)键盘录入你的出生年月日 (2)把该字符串转换为一个日期 (3)通过该日期得到一个毫秒值 (4)获取当前时间的毫秒值 (5)用(4)-(3)得到一个毫秒值 (6)把E的毫秒值转换为天 ...