<!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. SQL 时间戳转DateTime类型

    最近在工作中通过接口获取时间字段为时间戳的值,直接入库后再页面查询时间格式时候需要通过SQL语句将时间戳格式装换为时间格式进行比较,首先我们需要知道时间戳格式是怎么产生的,: Unix时间戳(Unix ...

  2. 简单的多表插入（oracle）

    简单的多表插入语句: insert all into 表1(字段1,2...) values(值1,值2......) into 表2(字段1,2...)) values(值1,值2......) s ...

  3. supervisor：进程管理工具

    一,安装(任何一种方式) apt-get install supervisor easy_install supervisor pip install supervisor 二,配置 配置superv ...

  4. Lenovo G40-30 Install win7

    SATA Controller mode 两种硬盘模式,如果装XP应该要选第二种模式,兼容:据说ACHI比IDE模式性能好,开机能快点, 装Win7,两种模式都可以,只不过装Win7一般人都用ACHI ...

  5. JavaScript实现自定义短信模板

    自定义短信模板,要求:可以插入关键字,当然是可以在点击到文本域中的任意位置,关键字以中括号包裹的形式出现[关键字],删除关键字要整个关键都删掉,而不是自己全删除. 详细在简书中 http://www. ...

  6. 只有20行Javascript代码！手把手教你写一个页面模板引擎

    http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...

  7. svn解决冲突 Aborting commit: 'XXXXXXXX'remains in conflict错误

    如果你遇到冲突,三件事你可以选择: “手动”合并冲突文本(检查和修改文件中的冲突标志). 用某一个临时文件覆盖你的工作文件. 运行svn revert <filename>来放弃所有的修改 ...

  8. iOS开发常用国外网站清单

    工欲善其事必先利其器,最近发现临时查找一些东西容易浪费时间,花了点时间整理一下常用的网站,方便以后备用. 国内的code4app,ui4app,cocoachina,oschina,csdn就不说了, ...

  9. 淘宝数据库OceanBase SQL编译器部分 源代码阅读--Schema模式

    淘宝数据库OceanBase SQL编译器部分 源代码阅读--Schema模式 什么是Database,什么是Schema,什么是Table,什么是列,什么是行,什么是User?我们能够能够把Data ...

  10. 分层模型的典型应用和FishiGUI的分层模型

    分层模式的典型应用: 对于交互类型的软件也能够採用分层模式来进行架构分析,一般来说将交互性的软件分为三个层次比較合适:显示层的职责是为了显示信息,应用逻辑层封装那些一般不easy发生变化的核心逻辑,而 ...