拖拽层1.0

我可以拖动哦！
<!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="https://files.cnblogs.com/wzq806341010/jquery-1.7.2.min.js"></script>
     <script src="https://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>
拖拽层1.0

推荐阅读
