<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="title" content="Jquery Div自由拖动排序" />
<meta name="keywords" content="Jquery Div自由拖动排序，JqueryDiv排序，Jquery拖动，排序" />
<meta name="description" content="Jquer模块自由拖动排序-彭亚欧个人博客代码中心" />
<title>Jquery Div自由拖动排序</title>
<style type="text/css">
.cur {
width: 200px;
height: 90px;
background-color: #0078ca;
position: absolute;
cursor: pointer;
text-align: center;
color: #fff;
font: 35px "微软雅黑", Arial, Helvetica, sans-serif;
padding-top: 30px;
}
#nblock_mid {
position: absolute;
width: 1000px;
left: 30px;
}
.linkA {
color: #333;
font: 25px "微软雅黑", Arial, Helvetica, sans-serif;
text-decoration:none;
}
</style>
</head>
<body>
<div id="nblock_mid">
<div class="cur"></div>
<div class="cur"></div>
<div class="cur"></div>
<div class="cur"></div>
<div class="cur"></div>
<div class="cur"></div>
<div class="cur"></div>
<div class="cur"></div>
<div class="cur"></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 SortDivHandler = {
CurrentLocationX: 0,
CurrentLocationY: 0,
CurrentSortFlag: 0,
CurrentSortDiv: null,
CurrentSortMove: 0,
Initialize: function() {
var isStart = false;
var curCount = parseInt(($("#nblock_mid").width() - 90) / 300);
for (var i = 0; i < $(".cur").length; i++) {
var floorCount = Math.ceil((i + 1) / curCount);
$($(".cur")[i]).attr("id", i);
$($(".cur")[i]).html(i + 1);
if ((i + 1) <= curCount) {
$($(".cur")[i]).animate({
left: 30 + i * 200 + (i - 1) * 30 + "px",
top: "30px"
}, 200 + i * 100);
} else if ((i + 1) > 3) {
var itemIndex = (i) % 3;
$($(".cur")[i]).animate({
left: 30 + itemIndex * 200 + (itemIndex - 1) * 30 + "px",
top: (floorCount - 1) * 120 + 30 * (floorCount - 1) + 30
}, 300 + i * 100);
}
}
var isDrag = true;
$(".cur").mousedown(function(e) {
var SortTarget = $(this);
SortDivHandler.CurrentSortMove = 0;
SortDivHandler.CurrentSortDiv = $(this);
isDrag = true;
$(".cur").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);
});
});
$(".cur").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;
}
}
});
$(".cur").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>
</html>
转 http://www.pengyaou.com/codejq/JWJSKFSJK_46.html
时间： 2024-11-06 03:39:33