前端jq版鼠标拖拽开发

前端用的什么开发工具|linux web前端开发工具|js前端开发面试题
html 代码

<!DOCTYPE html>
<html onselectstart=”return false”>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>web前端开发的主要开发工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        #main {
            width: 300px;
            height: 300px;
            left: 50%;
            top: 50%;
            position: absolute;
            background: antiquewhite;
        }
        #main-top {
            width: 300px;
            height: 50px;
            background: #c7cecd;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id=”main”>
        <div id=”main-top”>拖拽我</div>
        <div id=”main-bottom”></div>
    </div>
    <script src=”http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js”></script>
    <script>
        $(function () {
            var main = $(“#main”);
            var box = $(‘#main-top’);
            var offx = 0;
            var offy = 0;
            var mainw = main.width();
            var mainh = main.height();
            //鼠标按下
            box.mousedown(function (ev) {
                var ev = ev || window.event;
                //算出点击内容 里面的位置
                offx = ev.pageX – main.offset().left;
                offy = ev.pageY – main.offset().top;
                //按下过程中
                $(document).bind(“mousemove”, function (ev) {
                    var ev = ev || window.event;
                    //isdraging=true;
                    //当前鼠标的位置
                    var mousex = ev.pageX;
                    var mousey = ev.pageY;
                    // 动态算出盒子距离屏幕边缘的距离
                    var xinx = mousex – offx;
                    var xiny = mousey – offy;
                    //可视区宽高
                    var pagewidth = document.documentElement.clientWidth;
                    var pageheight = document.documentElement.clientHeight;
                    //算出盒子边缘距离屏幕的距离
                    var maxx = pagewidth – mainw;
                    var maxy = pageheight – mainh;
                    //xinx>0 并且 xinx<(页面最大宽度 – 浮层的宽度)
                    //xiny>0 并且 xiny<(页面最大宽度 -浮层的高度)
                    xinx = Math.min(maxx, Math.max(0, xinx));
                    xiny = Math.min(maxy, Math.max(0, xiny));
                    // 盒子的偏移量
                    main.css({ left: xinx + “px” })
                    main.css({ top: xiny + “px” })
                })
            })
            //抬起
            $(document).mouseup(function () {
                $(this).unbind(‘mousemove’);
            })
        })
    </script>
</body>
</html>

前端开发工具subline|腾讯前端开发电话面试题|前端开发工具vs开发工具

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

评论 抢沙发

评论前必须登录!