jQuery 鼠标拖拽排序

时间：2022-09-08 22:47:18
<!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. C&num; 时间现实问题（12小时制与24小时制）

    最近在修改项目中遇到时间问题,12小时制与24小时制的问题,想再次跟各位同仁提个醒. yyyy-MM-dd HH:mm:ss------大写的HH为24小时制 yyyy-MM-dd hh:mm:ss- ...

  2. android事件分发介绍

        Android事件分发 事件分发3个步骤 dispatchTouchEvent(event)派发 onInterceptTouchEvent(event)拦截 onTouchEvent(eve ...

  3. TOR的使用

    使用步骤: 1.配置,该计算机是否需要通过代理访问互联网?选否 2.该计算机的防火墙是否仅允许特定端口的互联网连接?选否 3.互联网服务提供商(ISP)是否对Tor网络连接进行了*或审查?选是 4. ...

  4. d038&colon; 星罗密布

    内容: 输出图形 *****$***$$$*$$$$$ 规律是...自己发现吧. 要求输入3,输出上面三行的图形 输入说明: 行数小于40 输出说明:   输入样例:   3 输出样例 : ***** ...

  5. Idea远程调试undertow

    1.修改jfinal.sh 添加远程调试配置,端口5555可自行设置 JAVA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,suspend=n,s ...

  6. oracle 11&period;2&period;0&period;4 rac 修改 ip vip scan ip

    修改前host文件 198.27.73.21 ht-d01 198.27.73.22 ht-d02 198.27.73.25 ht-d01-vip 198.27.73.26 ht-d02-vip 19 ...

  7. servlet跨域

    后台代码 package edu.nf.ch01.server; import javax.servlet.ServletException; import javax.servlet.annotat ...

  8. 2018-2019-2 20165209 《网络对抗技术》Exp1：PC平台逆向破解

    2018-2019-2 20165209 <网络对抗技术>Exp1:PC平台逆向破解 1 逆向及Bof基础实践说明 1.1 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件 ...

  9. Java分布式应用

    分布式计算就是通过计算机网络将计算工作分布到多台主机上,多个主机一起协同完成工作. 我试着列一下相关知识吧. 网络通讯,网络是分布式的基础,对分布式的理解建立在对网络的理解上,包括: OSI模型的7层 ...

  10. Android Notification实现推送消息过程中接受到消息端有声音及震动及亮屏提示

    在Android Notification状态栏通知一文中,简单实现了消息的推送效果,这里就接着上文说一下,当用户接受到消息时的提示效果 // 5-增加震动及声音及亮屏 notification.de ...

相关文章