jquery圖片拖拽實例(支持鼠標雙擊事件拖拽圖片)效果代碼



146 582 195



特效描述:圖片拖拽 鼠標雙擊事件拖拽圖片 效果代碼,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>jq拖拽(支持雙擊事件和拖拽)</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>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 拖動 拖拽 拖動插件 拖拽插件 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片拖動 圖片拖拽 帶標題的焦點圖 帶縮略圖的幻燈片
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

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