JS前端开发拖拽原理

macbook air 前端开发环境|html5前端开发环境|php前端开发包括哪些

注意事项:
这个是不兼容IE678的,在IE678会有文字选中的情况
防止鼠标脱出物体,所以用document.onmousemove而不是div.onmousemove;
return false是为了阻止FF浏览器的BUG
获取鼠标的位置:
e.clientX e.clientY;
事件里取消事件
document.onmouseup=function (){
document.onmousemove=null;
};

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <title>.net开发和前端:js拖拽</title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById(‘div1’);
            var disX = 0;
            var disY = 0;
            oDiv.onmousedown = function (e) {
                var e = e || window.event;
                disX = e.clientX – oDiv.offsetLeft;
                disY = e.clientY – oDiv.offsetTop;
                document.onmousemove = function (e) {
                    var e = e || window.event;
                    var l = e.clientX – disX;
                    var t = e.clientY – disY;
                    if (l < 0) {
                        l = 0;
                    } else if (l > document.documentElement.clientWidth – oDiv.offsetWidth) {
                        l = document.documentElement.clientWidth – oDiv.offsetWidth;
                    }
                    if (t < 0) {
                        t = 0;
                    } else if (t > document.documentElement.clientHeight – oDiv.offsetHeight) {
                        t = document.documentElement.clientHeight – oDiv.offsetHeight;
                    }
                    oDiv.style.left = l + ‘px’;
                    oDiv.style.top = t + ‘px’;
                };
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
                return false;
            };
        };
    </script>
</head>
<body>
    <div id=”div1″></div>
</body>
</html>

兼容IE678写法
思路:
在IE中运用事件捕获obj.setCapture
事件捕获只能用在IE里,网页中所有的事件都集中在obj上,其他的都发生不了
html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>前端开发 js:拖拽</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById(‘div1’);
            var disX = 0;
            var disY = 0;
            oDiv.onmousedown = function (ev) {
                var oEvent = ev || event;
                disX = oEvent.clientX – oDiv.offsetLeft;
                disY = oEvent.clientY – oDiv.offsetTop;
                if (oDiv.setCapture) {
                    //IE
                    oDiv.onmousemove = function (ev) {
                        var oEvent = ev || event;
                        var l = oEvent.clientX – disX;
                        var t = oEvent.clientY – disY;
                        oDiv.style.left = l + ‘px’;
                        oDiv.style.top = t + ‘px’;
                    };
                    oDiv.onmouseup = function () {
                        oDiv.onmousemove = null;
                        oDiv.onmouseup = null;
                        oDiv.releaseCapture();
                    };
                    oDiv.setCapture();
                } else {
                    //Chrome、FF
                    document.onmousemove = function (ev) {
                        var oEvent = ev || event;
                        var l = oEvent.clientX – disX;
                        var t = oEvent.clientY – disY;
                        oDiv.style.left = l + ‘px’;
                        oDiv.style.top = t + ‘px’;
                    };
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
                }
                return false; //chrome、ff、IE9
            };
        };
    </script>
</head>
<body>
    asdfasdfsdf
    <br> dfasfasdfasd
    <div id=”div1″>asdfasdfsdf
        <br> dfasfasdfasd
    </div>
    asdfasdfsdf
    <br> dfasfasdfasd
</body>
</html>

使用jquery
html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>html5做前端开发</title>
    <script type=”text/javascript” src=”http://libs.baidu.com/jquery/1.11.1/jquery.min.js”></script>
    <style type=”text/css”>
        * {
            padding: 0;
            margin: 0;
        }
        div {
            width: 180px;
            height: 180px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id=”box”>
    </div>
    <script type=”text/javascript”>
        $(function () {
            var disX = 0;
            var disY = 0;
            $(‘div’).mousedown(function (ev) {
                disX = ev.pageX – $(this).offset().left
                disY = ev.pageY – $(this).offset().top
                $(document).mousemove(function (ev) {
                    $(‘div’).css({
                        ‘left’: ev.pageX – disX
                    })
                    $(‘div’).css({
                        ‘top’: ev.pageY – disY
                    })
                })
                $(document).mouseup(function () {
                    $(this).off()
                })
                return false;
            })
        })
    </script>
</body>
</html>

idea可以开发前端吗|html5前端开发 原理|html5前端开发流程

» 本文来自:前端开发者 » 《JS前端开发拖拽原理》
» 本文链接地址:https://www.rokub.com/4215.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!