拖动

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #fdiv{

            width: 400px;

            height: 400px;

            border: 1px solid gray;

            position: absolute;

            top: 100px;

            left: 100px;

        }

        #sdiv{

            width: 100px;

            height: 100px;

            background-color: green;

            margin: 0 auto;

            box-shadow: 1px 1px 1px 2px red inset,1px 1px 1px 2px gray;

        }

        #sdiv:hover{

            cursor: all-scroll;

        }

    </style>

</head>

<body>

<div id="fdiv">

    <div id="sdiv"></div>

</div>

    <script>

        var fdiv = document.getElementById('fdiv');

        var sdiv = document.getElementById('sdiv');

        var eventUtil = {


            addHander: function(element, type, hander){


                if(window.addEventListener){


                    element.addEventListener(type, hander, false);


                }else if(window.attachEvent){


                    element.attachEvent('on'+type, hander);


                }else{


                    element['on'+type] = hander;


                }


            },


            removeHander: function(element, type, hander){


                if(window.addEventListener){


                    element.removeEventListener(type, hander, false);


                }else if(window.attachEvent){

                    element.detachEvent('on'+type, hander);


                }else{


                    element['on'+type] = null;


                }


            },


            getEvent: function(event){


                return event?event:window.event;


            },


            getElement: function(event){


                return event.target || event.srcElement;


            },


            preventDefault: function(event){


                if(event.preventDefault){


                    event.preventDefault();


                }else{


                    event.returnValue = false;


                }


            },


            stopPropagation: function(event){


                if(event.stopPropagation){


                    event.stopPropagation();


                }else{


                    event.cancelBubble = true;


                }


            }


        };

        window.onload = drag;

        function drag(){

            var screenX = document.documentElement.clientWidth;

            var screenY = document.documentElement.clientHeight;

            console.log(screenX)

            console.log(screenY)

            eventUtil.addHander(sdiv, 'mousedown', mouseDown);

            var startX = 0, startY = 0;

            function mouseDown(){

                var oEvent = eventUtil.getEvent(event);

                startX = oEvent.clientX - fdiv.offsetLeft;

                startY = oEvent.clientY - fdiv.offsetTop;

                eventUtil.addHander(document, 'mousemove', mouseMove);

                eventUtil.addHander(document, 'mouseup', mouseUp);

            }

            function mouseUp(){

                eventUtil.removeHander(document, 'mousemove', mouseMove);

            }

            function mouseMove(){

                var oEvent = eventUtil.getEvent(event);

                var x = oEvent.clientX;

                var y = oEvent.clientY;

                console.log(x - startX)

                if(x - startX <= 0 || y - startY <= 0 || x - startX+fdiv.offsetWidth>=screenX || y - startY+fdiv.offsetHeight>=screenY){


                }else{

                    fdiv.style.top = y - startY + 'px';

                    fdiv.style.left = x - startX + 'px';

                }

            }

        }

    </script>

</body>

</html>


你可能感兴趣的:(拖动)