该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();
}