jquery DIV 拖拽
标签 : jquery
代码详解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery Div自由拖动排序</title>
<style type="text/css">
.SortItem {
width: 500px;/*有用到:决定一行放几个该模块*/
background-color: #0078ca;
position: absolute;
cursor: pointer;
text-align: center;
color: #fff;
font: 35px "微软雅黑", Arial, Helvetica, sans-serif;
}
#SortContaint {
width: 1000px;/*有用到:决定一行放几个子模块*/
left: 130px;
}
</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>
</body>
<script type="text/javascript" src="http://www.pengyaou.com/jquery-1.4.min.js">
</script>
<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 xx = $('#SortContaint').offset().left;
var yy = $('#SortContaint').offset().top;
var ww = $('.SortItem').width();
alert(xx+"*"+yy+"*"+ww);
var SortDivHandler = {
CurrentLocationX: 0,
CurrentLocationY: 0,
CurrentSortFlag: 0,
CurrentSortDiv: null,
CurrentSortMove: 0,
Initialize: function() {
var isStart = false;
var sortItemCount = parseInt(($("#SortContaint").width()) / ww);
//表示一行可以放的总个数即列数
alert(sortItemCount);
for (var i = 0; i < $(".SortItem").length; i++) {
var floorCount = Math.ceil((i + 1) / sortItemCount);//(商)向上取整
//表示第i个模块存在于第几行
$($(".SortItem")[i]).attr("id", i);
$($(".SortItem")[i]).html(i + 1);
if ((i + 1) <= sortItemCount) {
//判断第i个模块是否小于列数
$($(".SortItem")[i]).animate({
left: xx+i * ww + (i - 1) * 30 + "px",
//xx:父DIV原点;
//i * ww: 第i个模块的width;
//(i - 1) * 30: i=0时,-30px;i=1时,0px;i=2时,30px;
top: yy+"px"
//yy:父DIV原点;
}, ww + i * 100);//?????????????????????????????????????????????????????????????????????
} else if ((i + 1) > sortItemCount) {
var itemIndex = (i) % sortItemCount;
//表示该行的第几列
$($(".SortItem")[i]).animate({
left: xx + itemIndex * ww + (itemIndex - 1) * 30 + "px",
//对应于上文left: xx+i * ww + (i - 1) * 30 + "px",
top: yy + (floorCount - 1) * 120
//(floorCount - 1):第几行
//120:表示上一行的顶点到这一行的顶点之间的距离(包含模块的高度与模块间的间隔)
//30 * (floorCount - 1):表示没什么鸟用,只要上一行注释的值给的足就行
}, ww + 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 + "px",
top: targetY + "px"
}, 500, function() {
$(this).css("opacity", 1);
});
$(this).stop(true).animate({
left: SortDivHandler.CurrentLocationX + "px",
top: SortDivHandler.CurrentLocationY + "px"
}, 300, function() {});
isDrag = false;
}
}
});
$(".SortItem").mouseup(function() {
if (isDrag == false) return;
SortDivHandler.CurrentSortMove = 1;
SortDivHandler.CurrentSortDiv.stop(true).animate({
left: SortDivHandler.CurrentLocationX + "px",
top: SortDivHandler.CurrentLocationY + "px"
}, 500, function() {
SortDivHandler.CurrentSortDiv.css("z-index", -1).css("opacity", 1);
});
});
}
}
</script>
</html>