原生js拖拽

web前端项目开发流程 前端开发接项目 成熟的前端开发项目

html 代码片段

<!DOCTYPE html PUBLIC “-//W3C//DTD html 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>原生js拖拽效果</title>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        #box {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: #f60;
        }
    </style>
</head>
<body>
    <div id=”box”></div>
    <script type=”text/javascript”>
        var oBox = document.getElementById(‘box’);
        oBox.onmousedown = function (e) {
            var oEvent = e || window.event,
                disL = oEvent.clientX – oBox.offsetLeft,
                disT = oEvent.clientY – oBox.offsetTop,
                maxL = document.documentElement.clientWidth – oBox.offsetWidth,
                maxT = document.documentElement.clientHeight – oBox.offsetHeight;
            document.onmousemove = function (e) {
                var oEvent = e || window.event,
                    disX = oEvent.clientX – disL,
                    disY = oEvent.clientY – disT;
                //console.log(disX);
                if (disX <= 0) { disX = 0 }
                if (disY <= 0) { disY = 0 }
                if (disX >= maxL) { disX = maxL }
                if (disY >= maxT) { disY = maxT }
                oBox.style.left = disX + ‘px’;
                oBox.style.top = disY + ‘px’;
            }
        }
        document.onmouseup = function () {
            document.onmousemove = null;
        }
    </script>
</body>
</html>

电子商务web前端开发项目 前端项目开发常用工具 前端开发项目责任描述

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

评论 抢沙发

评论前必须登录!