JQuery仿卡片拖拽demo

该demo功能：

1，能够根据输入的行列，生成对于的卡片。

2，每个卡片可以拖拽，关闭。

效果图：

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>

<link rel="stylesheet" type="text/css" href="css/style.css"></link>
<script type="text/javascript" src="js/min.js"></script>
<script type="text/javascript" src="js/jscolor.js"></script>
<script type="text/javascript" src="js/card.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<body>
	<div id="nav">
		<form action="">
			行:<input id="generateAllRow" type="text"
				οnkeyup="this.value=this.value.replace(/\D/g,'')" maxlength="2"
				size="1"> 
			 列:<input id="generateAllcolumn" type="text"
				οnkeyup="this.value=this.value.replace(/\D/g,'')" maxlength="2"
				size="1"> 
			固定
			<input id="fixed" type="checkbox" /> 
			<input id="generateAllCardsBtn" type="button" value="生成" /> 
			<input id="openAddCardWindowBtn" type="button" value="添加"/> 
			<input id="clearAllCardsBtn" type="button" value="清除" />
		</form>
	</div>
	
 	<div id="popWindow" class="white_overlay">
		请设置您要添加的卡片：<br> 
		行:<select id="selectAddRow">
		</select> 
		列:<select id="selectAddColumn">
		</select>
		<form action="">
			宽：<input id="newCardWidth" type="text" /> 
			高：<input id="newCardHeight" type="text" /> 
			固定<input type="checkbox" /><br> 
			顏色： <input class="jscolor" value="ab2567"><br>
			文字：<input id="cardContent" type="text" />
		</form>
		<a id="addNewCardBtn" href="#">添加</a>
		<a id="closeAddCardWindowBtn" href="#" >关闭</a>
	</div> 
	
	<div id="fadeNav" class="black_overlay">
	</div>
	
	<div id="mainForm">
	</div>
</body>
</html>

css代码：

@CHARSET "UTF-8";
html,body{-moz-user-select: none; -khtml-user-select: none; user-select: none;}
#nav {
	
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 26px;
	margin-left:30%;
	font-size:20px;
}

.mainForm {
	border: 2px solid orange;
}
.blank {
	padding: 26px;
}
.black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1001;
	-moz-opacity: 0.1;
	opacity: .70;
	filter: alpha(opacity = 70);
}

.white_overlay {
	display: none;
	position: absolute;
	top: 3%;
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 16px;
	border: 2px solid orange;
	background-color: white;
	z-index: 1002;
	overflow: auto;
} 

div.myCorner {
	float: left;
	padding: 20px;
	margin: 20px;
	background: #6af;
	border-radius: 10px;
	position: absolute;
	cursor:move;
	height:80px;
}
.shut{
	width:30px;
	height:20px;
	float:right;
	margin-right:10px;
	background:no-repeat 0px 0px;
	cursor:default;
}
.shut:hover{
	background: no-repeat 0px -25px;
}

js代码：

/**
 * 
 */


	$(document).ready(function() {
		bindButtonClick();
		bindDragEvent();
		});
	
	function bindButtonClick() {
		$("#openAddCardWindowBtn").on("click",openAddCardWindowEvent);
		$("#closeAddCardWindowBtn").on("click",closeAddCardWindowEvent);
		$("#clearAllCardsBtn").on("click",clearAllCardsEvent);
		$("#generateAllCardsBtn").on("click",generateAllCardsEvent);
		$("#mainForm").on("click",".shut",closeCardEvent);
	}
	
	function openAddCardWindowEvent() {
		var generateAllRow = $("#generateAllRow").val();
		var generateAllcolumn = $("#generateAllcolumn").val();
		$("#popWindow").show();
		$("#fadeNav").show();
		$("select").empty();
		SetValueToSelect(generateAllRow,"#selectAddRow");
		SetValueToSelect(generateAllcolumn,"#selectAddColumn");
	}
	
	function SetValueToSelect(rowOrColumn, selectRowOrColumn) {
		for(var i = 0; i <= rowOrColumn; i++){				
			$("<option></option>").val(i).text(i+1).appendTo("div "+ selectRowOrColumn);		
		}
	}
	
	function closeAddCardWindowEvent() {
		$("#popWindow").hide();
		$("#fadeNav").hide();
	}
	
	function clearAllCardsEvent() {
		$("div").remove("#mainForm div");
	}
	
	function generateAllCardsEvent() {
		var generateAllRow = 0,
		    generateAllcolumn = 0;
			divWidth = 0;
		generateAllRow = $("#generateAllRow").val();
	    generateAllcolumn = $("#generateAllcolumn").val();
		divWidth = Math.round($(window).width()/generateAllcolumn)-85;
		clearAllCardsEvent();
		generateCard(generateAllRow,generateAllcolumn,divWidth);
	}
	
	function generateCard(generateAllRow, generateAllcolumn, divWidth) {
		 for(var i = 0; i < generateAllRow; i++){
				for(var j = 0;j < generateAllcolumn; j++){
					addOneCard(i,j,divWidth);
				}
		}
	}
	
	function addOneCard (i,j,divWidth){
		var newDiv = $("<div class=\"myCorner\">"+ i +"-"+ j +"</div>"); //创建一个DIV
		var childDiv = $("<div><img class='shut1' alt='close'  title='close ' src='img/icon_close.png'>");
		newDiv.attr("id",i+"_"+j);
		childDiv.attr("class","shut");
		newDiv.append(childDiv);
		newDiv.css({
	         'width': divWidth,
	         'left':divWidth*j+(j+1)*(40+j),
	         'top':135*i+100,
	        }); 
		$('#mainForm').append(newDiv);
	}
	
	
	function bindDragEvent() {
		var isDrag = true,
		currentSort = 0,
		currentLocationX = 0,
		currentLocationY = 0;
		var moveObj;
		$("div").on("mousedown",".myCorner",function(event) {
			moveObj = $(this);
			isDrag = true;
			currentSort = 0;
			moveObj.attr("drag",1);
			currentLocationX = moveObj.offset().left;
			currentLocationY = moveObj.offset().top;
			abs_x = event.pageX-moveObj.offset().left;
			abs_y = event.pageY-moveObj.offset().top;						
			$(document).on("mousemove",function(event){
				if (moveObj.attr("drag") == 0 || currentSort == 1) return;	
					moveObj.css({'left':event.pageX-abs_x,'top':event.pageY-abs_y});
			}).mouseup(function() {
				moveObj.attr("drag",0);
			});
		});
		
		$("div").on("mousemove",".myCorner",function(event){
			if(!moveObj){
				return;
			}
			if($(this).attr("id") == moveObj.attr("id")) {
				return;
			}else{ 
				 if (currentSort == 1) return;
				 currentSort = 1;
				// $(this).css("background-color","black");
				 var targetX = $(this).offset().left;
                 var targetY = $(this).offset().top;
                 moveObj.stop(true).animate({
                        left: targetX-20 ,
                        top: targetY-20
                    }, 500, function() {
                        $(this).css("opacity", 1);
                    });
                    $(this).stop(true).animate({
                        left: currentLocationX-'20' ,
                        top: currentLocationY-'20' 
                        
                    }, 300, function() {
                    	 //$(this).css("background-color","black");
                    });
                    isDrag = false;		
			}
		});
		
		$("div").on("mouseup",".myCorner",function(event){ 
			if(!isDrag) return;
			currentSort = 1;
			moveObj.stop(true).animate({
                    left: currentLocationX-20,
                    top: currentLocationY-20
                }, 500, function() {
                    $(this).css("opacity", 1);
                });
		});
	}
		
	function closeCardEvent() {
		$(this).parent().remove();
	}

JQuery仿卡片拖拽demo

猜你喜欢