jquery图片拖拽实例(支持鼠标双击事件拖拽图片)效果代码



140 557 186



特效描述:图片拖拽 鼠标双击事件拖拽图片 效果代码,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

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