jquery div拖动排序效果代码js特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery div拖动排序效果代码js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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>jquery div拖动排序效果代码</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<style type="text/css">
.SortItem {
	width: 55px;
	height: 120px;
	background-color: #0078ca;
	position: absolute;
	cursor: pointer;
	text-align: center;
	color: #fff;
	font: 35px Arial, Helvetica, sans-serif;
	padding-top: 30px;
}
#SortContaint {
	position: absolute;
	width: 1000px;
	left: 30px;
}
</style>

</head>
<body>

<div id="SortContaint">
	<div class="SortItem"></div>
	<div class="SortItem"></div>
	<div class="SortItem"></div>
	<div class="SortItem"></div>
	<div class="SortItem"></div>
	<div class="SortItem"></div>
	<div class="SortItem"></div>
	<div class="SortItem"></div>
	<div class="SortItem"></div>
	<div class="SortItem"></div>
	<div class="SortItem"></div>
	<div class="SortItem"></div>
	<div class="SortItem"></div>
	<div class="SortItem"></div>
	<div class="SortItem"></div>
	<div class="SortItem"></div>
	<div class="SortItem"></div>	
</div>

<script type="text/javascript">
$(document).ready(function(e) {
		SortDivHandler.Initialize();
		if (typeof(document.onselectstart) != "undefined") {
			// IE    
			document.onselectstart = new Function("return false");
		} else {
			// firefox  
			document.onmousedown = new Function("return false");
			document.onmouseup = new Function("return true");
		}
	});
	var SortDivHandler = {
		CurrentLocationX: 0,
		CurrentLocationY: 0,
		CurrentSortFlag: 0,
		CurrentSortDiv: null,
		CurrentSortMove: 0,
		Initialize: function() {
			var isStart = false;
			var sortItemCount = 17;
			for (var i = 0; i < $(".SortItem").length; i++) {
				var floorCount = Math.ceil((i + 1) / sortItemCount);
				$($(".SortItem")[i]).attr("id", i);
				$($(".SortItem")[i]).html(i + 1);
				if ((i + 1) <= sortItemCount) {
					$($(".SortItem")[i]).animate({
						left: 30 + i * 26 + (i - 1) * 30 + "px",
						top: "30px"
					}, 200 + i * 100);
				} else if ((i + 1) > 3) {
					var itemIndex = (i) % 3;
					$($(".SortItem")[i]).animate({
						left: 30 + itemIndex * 200 + (itemIndex - 1) * 30 + "px",
						top: (floorCount - 1) * 120 + 30 * (floorCount - 1) + 30
					}, 300 + i * 100);
				}
			}
			var isDrag = true;
			$(".SortItem").mousedown(function(e) {
				var SortTarget = $(this);
				SortDivHandler.CurrentSortMove = 0;
				SortDivHandler.CurrentSortDiv = $(this);
				isDrag = true;
				$(".SortItem").css("z-index", 1);
				SortDivHandler.CurrentSortDiv.css("z-index", -1).css("opacity", 0.8);
				SortDivHandler.CurrentLocationX = SortTarget.offset().left;
				SortDivHandler.CurrentLocationY = SortTarget.offset().top;
				SortTarget.attr("drag", 1);
				SortTarget.css("position", "absolute");
				SortTarget.css("cursor", "default");
				var currentTarget = SortTarget;
				var currentDisX = e.pageX - $(this).offset().left;
				var currentDisY = e.pageY - $(this).offset().top;
				$(document).mousemove(function(event) {
					if ($(currentTarget).attr("drag") == 0 || SortDivHandler.CurrentSortMove == 1) return;
					var currentX = event.clientX;
					var currentY = event.clientY;
					var cursorX = event.pageX - currentDisX; // $(this).offset().left;  
					var cursorY = event.pageY - currentDisY; //-$(this).offset().top; 
					// $(currentTarget)
					$(currentTarget).css("top", cursorY - 8 + "px").css("left", cursorX - 30 + "px");
					isStart = true;

				});
				$(document).mouseup(function() {
					//  if(isDrag==false)return;
					$(currentTarget).attr("drag", 0);

				});
			});
			$(".SortItem").mousemove(function() {
				if (isStart == false) return;
				if (SortDivHandler.CurrentSortFlag == 0) {
					if ($(this).attr("id") == SortDivHandler.CurrentSortDiv.attr("id")) {
						return;
					} else {
						if (SortDivHandler.CurrentSortMove == 1) return;
						SortDivHandler.CurrentSortMove = 1;
						var targetX = $(this).offset().left;
						var targetY = $(this).offset().top;
						SortDivHandler.CurrentSortDiv.stop(true).animate({
							left: targetX - 30 + "px",
							top: targetY - 8 + "px"
						}, 500, function() {
							$(this).css("opacity", 1);
						});
						$(this).stop(true).animate({
							left: SortDivHandler.CurrentLocationX - 30 + "px",
							top: SortDivHandler.CurrentLocationY - 8 + "px"
						}, 300, function() {});
						isDrag = false;
					}
				}
			});
			$(".SortItem").mouseup(function() {
				if (isDrag == false) return;
				SortDivHandler.CurrentSortMove = 1;
				SortDivHandler.CurrentSortDiv.stop(true).animate({
					left: SortDivHandler.CurrentLocationX - 30 + "px",
					top: SortDivHandler.CurrentLocationY - 8 + "px"
				}, 500, function() {
					SortDivHandler.CurrentSortDiv.css("z-index", -1).css("opacity", 1);
				});
			});


		}
	}
</script>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)