jQuery的div拖动和层级控制
Z-INDEX是个好东西,它能够实现DOM元素的层叠,但是条件是你必须得基于绝对定位.
如果想要更改一个元素的位置,那么就更改left,top吧.
我小学作文很次,所以怕写出来大家看的更模糊,所以决定直接给代码吧.
Code<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ZIndexedPage.aspx.cs" Inherits="ZIndexTest_ZIndexedPage" %>
<!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 runat="server">
<title></title>
<script src="jquery-1.2.6-vsdoc.js" type="text/javascript"></script>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
<style type="text/css">
#indexedZone
{
width: 600px;
height: 600px;
background-color: Gray;
}
#indexedZone div
{
width: 80px;
height: 80px;
text-align: center;
background-color: Green;
cursor: hand;
}
</style>
<script type="text/javascript">
var maxIndex = 5;
$(document).ready(
function() {
$("#indexedZone div").mousedown(
function() {
$(this).css("cursor", "move")
.css("z-index", maxIndex.toString());
maxIndex++;
})
.mousedown(function() {
$(this).data("oldx", event.x);
$(this).data("oldy", event.y);
$(this).data("mousedown", true);
})
.mousemove(
function() {
if ($(this).data("mousedown")) {
//debugger;
var orignx = $(this).data("oldx");
var origny = $(this).data("oldy");
var oldleft = $(this).css("left");
var oldtop = $(this).css("top");
oldleft = oldleft.substring(0, oldleft.lastIndexOf("px"));
oldtop = oldtop.substring(0, oldtop.lastIndexOf("px"));
oldleft = parseInt(oldleft);
oldtop = parseInt(oldtop);
$(this).css("left", (oldleft + event.x - $(this).data("oldx")) + "px")
.css("top", (oldtop + event.y - $(this).data("oldy")) + "px");
$(this).data("oldx", event.x);
$(this).data("oldy", event.y);
//alert(orignx);
$(this).text(String.format("x:{0}", $(this).css("left")));
}
}
).mouseout(function() {
$(this).data("mousedown", false);
})
.mouseup(function() {
$(this).data("mousedown", false);
});
}
);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
</div>
<div id="indexedZone" style="position: absolute;">
<div id="div0" style="z-index: 0; position: absolute; left: 250px; top: 250px;">
哈哈!!!
</div>
<div id="div1" style="z-index: 1; position: absolute; left: 200px; top: 200px;">
asdfasdf123
</div>
<div id="div2" style="z-index: 2; position: absolute; left: 60px; top: 60px;">
asdfasdfdsf
</div>
<div id="div3" style="z-index: 3; position: absolute; left: 100px; top: 100px;">
asdfasdf3214
</div>
<div id="div4" style="z-index: 4; position: absolute; left: 140px; top: 140px;">
asdfasdf7878
</div>
</div>
</form>
</body>
</html>
代码长了点,大家将就着看,里面用了jQuery.有兴趣的朋友可以上网上下载一下.OK,完了(昨晚加班一小时的功劳啊.)
