jQuery的div拖动和层级控制

最新推荐文章于 2024-05-18 11:09:56 发布

weixin_33913377

最新推荐文章于 2024-05-18 11:09:56 发布

阅读量336

点赞数

文章标签：前端 javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/zhuisha/archive/2008/12/30/1364974.html

版权

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,完了(昨晚加班一小时的功劳啊.)

转载于:https://www.cnblogs.com/zhuisha/archive/2008/12/30/1364974.html

weixin_33913377

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的div拖动和层级控制

Z-INDEX是个好东西,它能够实现DOM元素的层叠,但是条件是你必须得基于绝对定位. 如果想要更改一个元素的位置,那么就更改left,top吧.我小学作文很次,所以怕写出来大家看的更模糊,所以决定直接给代码吧.Code<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="ZIndexed...
复制链接

扫一扫