基于jquery实现鼠标双击拖拽图片特效



35 139 47



特效描述:基于jquery实现 鼠标双击 拖拽图片,基于jquery实现鼠标双击拖拽图片特效

代码结构

1. 引入CSS

<link href="css/UserStyle.css" rel="stylesheet" />
<link href="css/UserStyle.css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>

3. HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
	$(function () {
		ImgListMouseDownEvent();//注册鼠标在图片上的事件(按下事件和双击事件)
		SortListMouseDownEvent();//注册鼠标在排序后图片上的事件(按下事件和双击事件)
		WindowMouseMoveAndUp();//注册windows事件(鼠标移动和松开事件)
	});
	//禁止拖动
	document.ondragstart = function () { return false };
	//禁用文本选择功能
	var omitformtags = ["input", "textarea", "select"]
	omitformtags = omitformtags.join("|")
	function disableselect(e) {
		if (omitformtags.indexOf(e.target.tagName.toLowerCase()) == -1)
			return false
	}
	function reEnable() {
		return true
	}
	if (typeof document.onselectstart != "undefined")
		document.onselectstart = new Function("return false")
	else {
		document.onmousedown = disableselect
		document.onmouseup = reEnable
	}
	//禁用右键
	$(document).ready(function () {
		$(document).bind("contextmenu", function (e) {
			//return false;
		});
	});
	//注册鼠标在图片上的事件(按下事件和双击事件)
	function ImgListMouseDownEvent() {
		$(".imgList > li").unbind("mousedown").unbind("dblclick");//为图片绑定(注册)鼠标按下事件和鼠标双击事件
		$(".imgList > li[allow]").mousedown(function (event) {
			$(document.body).data("_isimgdown_", true); //标示是否为鼠标在图片上的按下事件
			$(document.body).data("_eventx_", event.pageX); //鼠标在图片上按下事件时鼠标的x坐标值
			$(document.body).data("_eventy_", event.pageY); //鼠标在图片上按下事件时鼠标的y坐标值
			$(document.body).data("_li_", $(this)); //鼠标在图片上按下事件时当前的li元素
			$(document.body).data("_imgtop_", (event.pageY - $(this).offset().top) * 0.26);
			$(document.body).data("_imgleft_", (event.pageX - $(this).offset().left) * 0.38);
			//var _li_ = $(document.body).data("_li_");
			//alert("x:" + $(document.body).data("_eventx_") + " y:" + $(document.body).data("_eventy_") + " li-img:" + $("img", _li_).attr("src") + " li-div:" + $("div", _li_).html());
		}).dblclick(function (event) {
			$(".imgList > li").unbind("mousedown").unbind("dblclick");//为图片绑定(注册)鼠标按下事件和鼠标双击事件
			$(".sortList > li").unbind("mousedown").unbind("dblclick");//为已选图片绑定(注册)鼠标按下事件和鼠标双击事件
			var _this_ = $(this);//鼠标在图片上双击事件时当前的li元素
			var _img_ = $("img", _this_);//鼠标在图片上双击事件时当前的图片元素
			var _div_ = $("div", _this_);//鼠标在图片上双击事件时当前的div元素
			//alert(_div_.html()+" "+_img_.attr("src") );
			var targetLi; //定义目标
			//alert(targetLi);
			//循环目标的li元素
			$(".sortList > li").each(function (i, e) {
				if ($("img", $(this)).length == 0 && (!$(this).attr("allow") || $(this).attr("allow") == false)) {
					targetLi = $(this); //目标为符合条件的当前li元素
					return false;
				}
			});
			//alert($("div",targetLi).attr("class"));
			if (targetLi) { //目标li存在
				var targetLeft = targetLi.offset().left;
				var targetTop = targetLi.offset().top;
				_this_.removeAttr("allow").addClass("image_shadow"); //排序前的当前li元素移除allow属性 添加样式:image_shadow
				targetLi.attr("allow", true);//排序后的目标元素添加属性allow为true
				var _dropDivID_ = "_divDrop_" + _this_.attr("id").replace("_s_", ""); //动画层id
				$("<div class='DropDiv' style='display:none;' id='" + _dropDivID_ + "'></div>").appendTo($(document.body)); //创建动画层
				$("#" + _dropDivID_).html(_div_.html())
				   .css({ top: event.pageY - (event.pageY - $(this).offset().top) * 0.26, left: event.pageX - (event.pageX - $(this).offset().left) * 0.38 })
				   .height(50)
				   .width(86)
				   .fadeIn(100, function () {
					   $(this).animate({ top: targetTop - 2, left: targetLeft + 2 }, 500, "linear", function () {
						   $(this).fadeOut(100, function () {
							   $(this).remove();
							   //生成图片和文字 
							   targetLi.empty()
								   .html("<div style='display:none;'>" + _div_.html() + "</div>" + "<img width=86 height=50 style='display:none;' src=" + _img_.attr("src") + " />")
								   .removeAttr("id")
								   .attr("id", "_s_" + _this_.attr("id").replace("_s_", ""));
							   //图片效果
							   $("img", targetLi).show();
						   });
					   });
				   });
				//alert("left:" + targetLeft + " top:" + targetTop);
				ImgListMouseDownEvent();//重新注册鼠标在图片上的事件(按下事件和双击事件)
				SortListMouseDownEvent();//重新注册鼠标在排序后图片上的事件(按下事件和双击事件)
			}
		})
	}
	//注册鼠标在排序后图片上的事件(按下事件和双击事件)
	function SortListMouseDownEvent() {
		$(".sortList li").unbind("mousedown").unbind("dblclick").unbind("mouseover").unbind("mouseout");
		$(".sortList li[allow=true]").mousedown(function (event) {
			$(document.body).data("_issortdown_", true);
			$(document.body).data("_eventx_", event.pageX);
			$(document.body).data("_eventy_", event.pageY);
			$(document.body).data("_li_", $(this));
			$(document.body).data("_imgtop_", (event.pageY - $(this).offset().top));
			$(document.body).data("_imgleft_", (event.pageX - $(this).offset().left));
		}).dblclick(function (event) {
			//debugger;
			$(".imgList > li").unbind("mousedown").unbind("dblclick");
			$(".sortList li").unbind("mousedown").unbind("dblclick");
			var _this_ = $(this);//鼠标在排序后图片上双击事件时当前的li元素
			var _img_ = $("img", _this_);//鼠标在排序后图片上双击事件时当前的图片元素
			var _div_ = $("div", _this_);//鼠标在排序后图片上双击事件时当前的div元素
			var targetLi = $("#" + _this_.attr("id").replace("_s_", ""));//得到目标元素(为鼠标在排序前图片上双击事件时当初的li元素)
			var _dropDivID_ = "_divDrop_" + _this_.attr("id").replace("_s_", ""); //动画层id
			$("<div class='DropDiv' style='display:none;' id='" + _dropDivID_ + "'></div>").appendTo($(document.body));//创建动画层
			targetLi.attr("allow", true);//排序前的原元素添加属性allow为true
			_this_.removeAttr("allow");//排序后的当前li元素移除allow属性 
			$("#" + _dropDivID_).html(_div_.html())
							.css({ top: _this_.offset().top - 2, left: _this_.offset().left + 2 })
							.height(50)
							.width(86)
							.fadeIn(100, function () {
								$(this).animate({ top: targetLi.offset().top + (targetLi.height() * 0.5) / 2, left: targetLi.offset().left + (targetLi.width() * 0.5) / 2 }, 500, "linear", function () {
									$(this).remove();
									_this_.empty().removeAttr("id");
									targetLi.removeClass("image_shadow");
									addNoImgLiCss(); //添加无图片样式 addNoImgLiCss
								});
							});
			ImgListMouseDownEvent();//重新注册鼠标在图片上的事件(按下事件和双击事件)
			SortListMouseDownEvent();//重新注册鼠标在排序后图片上的事件(按下事件和双击事件)
		}).mouseover(function () {
			var _this_ = $(this);
			$("img", _this_).hide();
			$("div", _this_).show().addClass("selli");
		}).mouseout(function () {
			var _this_ = $(this);
			$("div", _this_).hide().removeClass("selli");
			$("img", _this_).show();
		});
	}
	//#region 添加无图片样式 addNoImgLiCss
	function addNoImgLiCss() {
		var index = 1;
		$('li', $(".sortList")).each(function () {
			if ($("img", this).length == 0) {
				if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
					$(this).html("<span>" + index + "</span>");
				}
				else {
					$(this).html("<div class='sortListBg Bg" + index + "'></div>");
				}
			}
			index++;
		});
	}
	//#endregion
	//#region 获取排序后li的位置数组 
	function getSortPositionArrayList() {
		var arraylist = new Array();
		$("li", $(".sortList")).each(function (i) {
			var array = new Array();
			array[0] = $(this).offset().left;
			array[1] = $(this).offset().left + $(this).width();
			array[2] = $(this).offset().top;
			array[3] = $(this).offset().top + $(this).height();
			arraylist[i] = array;
		});
		return arraylist;
	}
	//#endregion
	//#region 获取拖动位置 getPosition
	function getPosition(pageX, pageY) {
		var arraylist = getSortPositionArrayList();//获取排序后li的位置数组
		for (var i = 0; i < arraylist.length; i++) { //循环排序后li的位置数组
			if (pageX >= arraylist[i][0] && pageX <= arraylist[i][1] && pageY >= arraylist[i][2] && pageY <= arraylist[i][3]) {
				return i; //如果鼠标的坐标位置处于排序后li的位置数组之间则返回排序后当前的li的索引
			}
		}
		return -1;
	}
	//#endregion
	//#region 注册windows事件(鼠标移动和松开事件)
	function WindowMouseMoveAndUp() {
		$(document).mousemove(function (event) {
			ImgDragEvent(event);//鼠标在排序前图片上按下后的拖拽事件
			SortDragEvent(event);//鼠标在排序后图片上按下后的拖拽事件
		}).mouseup(function (event) {
			var position = getPosition(event.pageX, event.pageY);
			if ($(document.body).data("_isimgdown_")) { //鼠标是在排序前图片上按下时
				ImgMouseUpEvent(position);//鼠标在图片上的松开事件
			}
			if ($(document.body).data("_issortdown_")) {//鼠标是在排序后图片上按下时
				SortMouseUpEvent(position);//鼠标在排序后图片上的松开事件
			}
		});
	}
	//#endregion 
	//#region 注册鼠标在排序前图片上按下后的拖拽事件
	function ImgDragEvent(event) {
		//排序前图片拖拽
		if ($(document.body).data("_isimgdown_")) {
			var _eventx_ = $(document.body).data("_eventx_");
			var _eventy_ = $(document.body).data("_eventy_");
			var _li_ = $(document.body).data("_li_");
			//整体移动 >5 相素时移动
			if (Math.abs(event.pageX - _eventx_) + Math.abs(event.pageY - _eventy_) >= 5) {
				var _divHtml_ = $("div", _li_).html();
				$("#DropDiv").html(_divHtml_)
							.css({ top: event.pageY - $(document.body).data("_imgtop_"), left: event.pageX - $(document.body).data("_imgleft_") })
							.height(50)
							.width(86)
							.show();
			}
		}
	}
	//#endregion
	//#region 注册鼠标在排序后图片上按下后的拖拽事件
	function SortDragEvent(event) {
		//排序后图片拖拽
		if ($(document.body).data("_issortdown_")) {
			var _eventx_ = $(document.body).data("_eventx_");
			var _eventy_ = $(document.body).data("_eventy_");
			var _li_ = $(document.body).data("_li_");
			//整体移动 >5 相素时移动
			if (Math.abs(event.pageX - _eventx_) + Math.abs(event.pageY - _eventy_) >= 5) {
				var imgsrc = $("img", _li_).length > 0 ? $("img", _li_).attr("src") : "/Aspx_Page/images/white.png";
				var _divHtml_ = $("div", _li_).html()
				$("#DropDiv").html(_divHtml_)
					.css({ top: event.pageY - $(document.body).data("_imgtop_"), left: event.pageX - $(document.body).data("_imgleft_") })
					.height(50)
					.width(86)
					.show();
			}
		}
	}
	//#endregion
	//#region 注册图片mouseup事件 registerImgMouseUpEvent
	function ImgMouseUpEvent(position) {
		//当前拖拽的图片对象
		var _li_ = $(document.body).data("_li_");
		var _img_ = $("img", _li_);
		var _divHtml_ = $("div", _li_);
		//当前拖拽位置
		if (position != -1) {
			//拖在已存在图片上
			if ($("img", $(".sortList > li:eq(" + position + ")")).length > 0) {
				var existsid = $(".sortList > li:eq(" + position + ")").attr("id");
				$("#" + existsid.replace("_s_", "")).attr("allow", true).removeClass("image_shadow");
				/*
				var nextLi;
				$(".sortList > li:gt(" + position + ")").each(function () {
					if (!$(this).attr("allow") || $(this).attr("allow") == false) {
						nextLi = $(this);
						return false;
					}
				});
				var existsid = $(".sortList > li:eq(" + position + ")").attr("id");
				if (nextLi != undefined) {
					nextLi.html($("#_s_" + existsid.replace("_s_", "")).html())
					.insertAfter($(".sortList > li:eq(" + position + ")"))
					.attr("allow", true)
					.removeClass("image_shadow")
					.attr("id", "_s_" + existsid.replace("_s_", ""))
				}
				else {
					$("#" + existsid.replace("_s_", "")).attr("allow", true).removeClass("image_shadow");
				}
				*/
			}
			//生成图片和文字
			$("li:eq(" + position + ")", $(".sortList"))
								.empty()
								.html("<div style='display:none;'>" + _divHtml_.html() + "</div>" + "<img width=86 height=50 style='display:none;' src=" + _img_.attr("src") + " />")
								.removeAttr("id")
								.attr("id", "_s_" + _li_.attr("id").replace("_s_", ""))
								.attr("allow", true);
			//图片效果
			$("img", $("#_s_" + _li_.attr("id").replace("_s_", ""))).show();
			//移除可拖拽属性
			_li_.removeAttr("allow").addClass("image_shadow");
			//注册事件
			ImgListMouseDownEvent();//注册鼠标在图片上的事件(按下事件和双击事件)
			SortListMouseDownEvent();//注册鼠标在排序后图片上的事件(按下事件和双击事件)
		}
		//移除img的mousedown
		$(document.body).removeData("_isimgdown_");
		//隐藏拖拽层
		$("#DropDiv").empty().hide();
	}
	//#endregion
	//#region 注册ULmouseup事件 registerUlMouseUpEvent
	function SortMouseUpEvent(position) {
		//debugger;
		//当前拖拽li对象
		var _li_ = $(document.body).data("_li_");
		//当前拖拽位置
		if (position != -1) {
			//debugger;
			//拖在已存在图片上
			if ($("img", $("ul.sortList > li:eq(" + position + ")")).length > 0) {
				var existsid = $("ul.sortList > li:eq(" + position + ")").attr("id");
				$("#" + existsid.replace("_s_", "")).attr("allow", true).removeClass("image_shadow");
			}
			//在新位置添加元素
			$("ul.sortList > li:eq(" + position + ")")
				.empty()
				.attr("allow", true)
				.attr("id", _li_.attr("id"))
				.html(_li_.html());
			//移除原位置元素
			$("ul.sortList > li:eq(" + _li_.index() + ")")
				.removeAttr("id")
				.removeAttr("allow")
				.html('<div class="sortListBg Bg"' + (_li_.index() + 1));
			/*
			//向后拖动
			if (_li_.index() > position) {
				$("img", _li_).hide();
				$(_li_).insertBefore($(".sortList > li:eq(" + position + ")"));
				//            $("img", _li_).fadeIn(100, function () {
				//                $(this).fadeOut(100, function () {
				//                    $(this).fadeIn(100);
				//                });
				//            })
			}
			//向前拖动
			if (_li_.index() < position) {
				$("img", _li_).hide();
				$(_li_).insertAfter($(".sortList > li:eq(" + position + ")"));
				//            $("img", _li_).fadeIn(100, function () {
				//                $(this).fadeOut(100, function () {
				//                    $(this).fadeIn(100);
				//                });
				//            })
			}
			*/
		}
		else {
			$("#" + _li_.attr("id").replace("_s_", ""))
			.attr("allow", true)
			.removeClass("image_shadow");
			_li_.empty().removeAttr("allow").removeAttr("id");
		}
		//注册事件
		ImgListMouseDownEvent();//注册鼠标在图片上的事件(按下事件和双击事件)
		SortListMouseDownEvent();//注册鼠标在排序后图片上的事件(按下事件和双击事件)
		//添加无图片的li样式
		addNoImgLiCss();
		//移除ul的mousedown
		$(document.body).removeData("_issortdown_");
		//隐藏拖拽层
		$("#DropDiv").empty().hide();
	}
	//#endregion
</script>
</head>
<body style="width: 100%; overflow-x: hidden;">
<div class="contentmiddle">
	<div class="contentimg">
		<ul class="imgList">
			<li allow="true" id="599029">
				<img src="UpFiles/Img_Option/Q001_02_01_A01.jpg" style="width: 230px; height: 140px;" /><div>坚持不懈、目标明确地追求事业巅峰</div>
			</li>
			<li allow="true" id="599030">
				<img src="UpFiles/Img_Option/Q001_02_03_B01.jpg" style="width: 230px; height: 140px;"><div>关注“生命的意义”之类的抽象问题</div>
			</li>
			<li allow="true" id="599031">
				<img src="UpFiles/Img_Option/Q001_02_02_C01.jpg" style="width: 230px; height: 140px;"><div>喜新厌旧,对很多事都是三分钟热度</div>
			</li>
			<li allow="true" id="599032">
				<img src="UpFiles/Img_Option/Q001_02_04_A01.jpg" style="width: 230px; height: 140px;"><div>不为名利所扰,追求和谐的生活方式</div>
			</li>
			<li allow="true" id="599033">
				<img src="UpFiles/Img_Option/Q001_02_05_C01.jpg" style="width: 230px; height: 140px;"><div>不自主地疏远价值观与自己相反的人</div>
			</li>
			<li allow="true" id="599034">
				<img src="UpFiles/Img_Option/Q001_02_06_B02.jpg" style="width: 230px; height: 140px;"><div>会去深入地了解自己感兴趣的事物</div>
			</li>
		</ul>
	</div>
	<div class="clear"></div>
	<ul class="sortList">
		<li>
			<div class="sortListBg Bg1"></div>
		</li>
		<li>
			<div class="sortListBg Bg2"></div>
		</li>
		<li>
			<div class="sortListBg Bg3"></div>
		</li>
		<li>
			<div class="sortListBg Bg4"></div>
		</li>
		<li>
			<div class="sortListBg Bg5"></div>
		</li>
		<li>
			<div class="sortListBg Bg6"></div>
		</li>
	</ul>
</div>
<!--漂浮层-->
<div id="DropDiv" class="DropDiv" style="display: none; z-index: 1000;"></div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片翻转 图片旋转 图片放大镜 图片延迟加载 图片延迟 图片加载 图片淡出淡进 图片淡出 图片淡进 图片全屏 图片叠加 图片层叠 图片拖动 图片拖拽 头像上传 图片上传 二维码 h5图片动画 h5图标动画 html5图片动画 html5图标动画 带缩略图的幻灯片 地图 中国地图 世界地图 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 图片广告 纯图片轮播 图片轮播 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 拖动 拖拽 拖动插件 拖拽插件 图片收缩展开 图片收缩 图片展开 图片滚动 图片滚动条 图片滑动 图片滑块 图片切换 图片选项卡 图标选项卡 自动滚动图片轮播 图标导航 图标菜单 背景切换 大图切换 滑动星星打分 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 放大缩小 变大变小 放大 缩小 变大 变小 缩放 缩放切换 图表 图片 图片插件 头像截图 其他 图片拖动 图片拖拽 缩略图 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 排序 表格排序

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到