码迷,mamicode.com
首页 > 其他好文 > 详细

拖拽层1.0

时间:2014-05-04 10:57:24      阅读:275      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   ext   

我可以拖动哦!
 
我可以拖动哦!
 
我可以拖动哦!
 
我可以拖动哦!
 

 

 

 

 

 

 

 

 

 

 

bubuko.com,布布扣
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .mdiv
        {
            position: absolute;
            border: #808080 solid 1px;
            width: 280px;
            cursor: pointer;
        }

        .head
        {
            background-color: #ccc;
            width: 100%;
            height: 45px;
            text-align: center;
            line-height: 45px;
        }
        .body
        {
            width: 100%;
            height: 235px;
            background-color:#ffffff;
        }

        .moveDiv
        {
            border: dashed 2px #ccc;
        }
    </style>
    <script src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        var DrgnMove = function (_head, _obj, mode) {
            var head = $(_head);
            var obj = $(_obj);
            var d_x, d_y = 0;
            var moveObj;
            if (mode == 1) {
                obj.on("mousedown", function (e) {
                    e = e || window.event;
                    moveObj = obj.clone();
                    moveObj.css("border", "dashed #808080 2px").appendTo("body");
                    d_x = e.clientX - $(obj).offset().left;
                    d_y = e.clientY - $(obj).offset().top;
                    if (document.body.setCapture) {
                        document.body.onmousemove = move;
                        document.body.onmouseup = end;
                        document.body.setCapture;
                    } else {
                        document.addEventListener("mousemove", move, false);
                        document.addEventListener("mouseup", end, false);
                    }
                });
                var move = function (e) {
                    e = window.event || e;
                    moveObj.css({ "left": e.clientX - d_x, "top": e.clientY - d_y });
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //防止选择文字
                };
                var end = function () {
                    if (document.body.setCapture) {
                        document.body.onmousemove = null;
                        document.body.onmouseup = null;
                        document.body.setCapture;
                    } else {
                        document.removeEventListener("mousemove", move, false);
                        document.removeEventListener("mouseup", end, false);
                    }
                    obj.css({ "left": moveObj.css("left"), "top": moveObj.css("top") });
                    moveObj.remove();
                }
            } else {
                obj.on("mousedown", function (e) {
                    e = e || window.event;
                    d_x = e.clientX - $(obj).offset().left;
                    d_y = e.clientY - $(obj).offset().top;
                    if (document.body.setCapture) {
                        document.body.onmousemove = move;
                        document.body.onmouseup = end;
                        document.body.setCapture;
                    } else {
                        document.addEventListener("mousemove", move, false);
                        document.addEventListener("mouseup", end, false);
                    }
                });
                var move = function (e) {
                    e = window.event || e;
                    obj.css({ "left": e.clientX - d_x, "top": e.clientY - d_y });
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //防止选择文字
                };
                var end = function () {
                    if (document.body.setCapture) {
                        document.body.onmousemove = null;
                        document.body.onmouseup = null;
                        document.body.setCapture;
                    } else {
                        document.removeEventListener("mousemove", move, false);
                        document.removeEventListener("mouseup", end, false);
                    }
                }
            }
        }

        $(function () {
            DrgnMove("#mHead", "#mobj", 1);
            DrgnMove("#Div2", "#Div1", 2);
            DrgnMove("#Div4", "#Div3", 2);
            DrgnMove("#Div6", "#Div5", 2);
        });
    </script>
    
</head>
   
<body>
     <script src="http://files.cnblogs.com/wzq806341010/jquery-1.7.2.min.js"></script>
     <script src="http://files.cnblogs.com/wzq806341010/DrginMove.js"></script>
    <div id="mobj" class="mdiv">
        <div id="mHead" class="head">我可以拖动哦!</div>
        <div class="body"></div>
    </div>
    <div id="Div1" class="mdiv">
        <div id="Div2" class="head">我可以拖动哦!</div>
        <div class="body"></div>
    </div> 
    <div id="Div3" class="mdiv">
        <div id="Div4" class="head">我可以拖动哦!</div>
        <div class="body"></div>
    </div> 
    <div id="Div5" class="mdiv">
        <div id="Div6" class="head">我可以拖动哦!</div>
        <div class="body"></div>
    </div>
</body>
</html>
bubuko.com,布布扣

 

 

 

 

 

拖拽层1.0,布布扣,bubuko.com

拖拽层1.0

标签:style   blog   class   code   java   ext   

原文地址:http://www.cnblogs.com/wzq806341010/p/3705617.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!