基于jquery實現鼠標雙擊拖拽圖片特效



29 112 38



特效描述:基于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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表