首页 > Web开发 > 详细

js 拖拽

时间:2020-02-23 23:31:09      阅读:120      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="width: 100px;height: 100px;position: absolute;top: 0;left: 0;background-color: #00008B;">

        </div>
        <script type="text/javascript">
            var div = document.getElementsByTagName(‘div‘)[0];
            drap(div);

            function drap(elem) {
                var disX,
                    disY;
                addEvent(elem, ‘mousedown‘, function(e) {
                    var event = e || window.event;
                    disX = event.pageX - parseInt(getStyle(elem, ‘left‘));
                    disY = event.pageY - parseInt(getStyle(elem, ‘top‘));
                    addEvent(document, ‘mousemove‘, mouseMove);
                    addEvent(document, ‘mouseup‘, mouseUp);
                    stopBubble(event);
                    cancelHandler(event);
                });

                function mouseMove(e) {
                    var event = e || window.event;
                    elem.style.left = event.pageX - disX + ‘px‘;
                    elem.style.top = event.pageY - disY + ‘px‘;
                }

                function mouseUp(e) {
                    var event = e || window.event;
                    removeEvent(document, ‘mousemove‘, mouseMove);
                    removeEvent(document, ‘mouseup‘, mouseUp);
                }
            }

            function addEvent(elem, type, handle) {
                if (elem.addEventListener) {
                    elem.addEventListener(type, handle, false);
                } else if (elem.attachEvent) {
                    elem.attachEvent(‘on‘ + type, function() {
                        handle.call(elem);
                    })
                } else {
                    elem[‘on‘ + type] = handle;
                }
            }
            //获取样式
            function getStyle(elem, prop) {
                if (window.getComputedStyle) {
                    return window.getComputedStyle(elem, null)[prop];
                } else {
                    return elem.currentStyle[prop];
                }
            }

            function stopBubble(event) {
                if (event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    event.stopBubble = true;
                }
            }

            function cancelHandler(event) {
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
            }

            function removeEvent(elem, type, myFunction) {
                if (elem.removeEventListener) { // // 所有浏览器,除了 IE 8 及更早IE版本
                    elem.removeEventListener(type, myFunction);
                } else if (elem.detachEvent) { // IE 8 及更早IE版本
                    elem.detachEvent(‘on‘ + type, myFunction);
                }
            }
        </script>
    </body>
</html>

 

js 拖拽

原文:https://www.cnblogs.com/hjysunshine/p/12355010.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!