前端开发js原生 可拖拽效果

前端开发 浏览器差异
跨浏览器的web前端开发
前端开发哪个浏览器

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>可拖拽特效</title>
        <style type=”text/css”>
            * {
                margin: 0;
                padding: 0;
            }
            .header {
                width: 100%;
                height: 30px;
                background: #036663;
                line-height: 30px;
                color: #fff;
                text-indent: 30px;
            }
            #demo {
                width: 400px;
                height: 300px;
                border: solid 5px #eee;
                box-shadow: 0 0 5px #666;
                position: absolute;
                top: 40%;
                left: 40%;
            }
            #innerht {
                height: 25px;
                background: #036663;
                border-bottom: solid 1px #369;
                color: #fff;
                text-indent: 10px;
                cursor: move;
            }
            #close {
                float: right;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class=”header”>注册信息</div>
        <div id=”demo”>
            <div id=”innerht”>
                注册信息(可拖拽)<span id=”close”>【关闭】</span>
            </div>
            <div class=”write”></div>
        </div>
    </body>
    <script type=”text/javascript”>
        ;(function(window) {
            function $(id) {
                return document.getElementById(id)
            }
            // 获取对象
            var innerht = $(‘innerht’),
                demo = $(‘demo’),
                close = $(‘close’)
            // 给innerht绑定鼠标事件
            innerht.onmousedown = function(event) {
                // 解决event兼容问题
                var event = event || window.event
                // 获取鼠标在页面上坐标
                var pageX =
                    event.pageX ||
                    event.clientX + document.documentElement.scrollLeft
                var pageY =
                    event.pageY ||
                    event.clientY + document.documentElement.scrollTop
                // 获取鼠标在innerht内部的坐标
                var innerX = pageX – demo.offsetLeft
                var innerY = pageY – demo.offsetTop
                // 给document绑定鼠标移动事件,防止鼠标快速滑动时滑出innerht
                document.onmousemove = function(event) {
                    var event = event || window.event
                    // 获取鼠标移动时的坐标
                    var moveX =
                        event.pageX ||
                        event.clientX + document.documentElement.scrollLeft
                    var moveY =
                        event.pageY ||
                        event.clientY + document.documentElement.scrollTop
                    // 鼠标移动时demo的位置坐标
                    var demoX = moveX – innerX
                    var demoY = moveY – innerY
                    // 鼠标移动时demo的位置坐标
                    demo.style.left = demoX + ‘px’
                    demo.style.top = demoY + ‘px’
                    //清除选中文字
                    window.getSelection
                        ? window.getSelection().removeAllRanges()
                        : document.selection.empty()
                }
            }
            // 鼠标抬起清除拖拽效果
            document.onmouseup = function() {
                document.onmousemove = null
            }
            // 点击关闭按钮关闭跟随框
            close.onclick = function() {
                this.parentNode.parentNode.style.display = ‘none’
            }
        })(window)
    </script>
</html>
学前端开发还要懂浏览器
web前端开发中浏览器兼容
前端开发必备浏览器是哪几个
» 本文来自:前端开发者 » 《前端开发js原生 可拖拽效果》
» 本文链接地址:https://www.rokub.com/6875.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!