拖拽案例

拖拽案例.gif
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box  {
            width: 300px;
            height: 200px;
            padding-top: 100px;
            background-color: pink;
            margin: 100px;
            text-align: center;
            font: 18px/30px "simsun";
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>

    <script src="animate.js"></script>
    <script>
        //需求:鼠标进入盒子之后只要移动,哪怕1像素,随时更换里面的内容。(鼠标在盒子中的坐标)
        //技术点:新事件,onmousemove.在事件源上哪怕移动1像素也会触动这个事件。
            //一定程度上,模拟了定时器
        //步骤:
        //1.老三步和新五步
        //2.获取鼠标在整个页面的位置
        //3.获取盒子在整个页面的位置
        //4.用鼠标的位置减去盒子的位置赋值给盒子的内容。

        //1.老三步和新五步
        var div = document.getElementsByTagName("div")[0];

        div.onmousemove = function (event) {
//            event = event || window.event;
//            //2.获取鼠标在整个页面的位置
//            var pagex = event.pageX || scroll().left + event.clientX;
//            var pagey = event.pageY || scroll().top + event.clientY;
//            //3.获取盒子在整个页面的位置
//            var xx = div.offsetLeft;
//            var yy = div.offsetTop
//            //4.用鼠标的位置减去盒子的位置赋值给盒子的内容。
//            var targetx = pagex - xx;
//            var targety = pagey - yy;
//            this.innerHTML = "鼠标在盒子中的X坐标为:"+targetx+"px;<br>鼠标在盒子中的Y坐标为:"+targety+"px;"
            event = event || window.event;
            //2.获取鼠标在整个页面的位置
            var pagex = event.pageX || scroll().left + event.clientX;
            var pagey = event.pageY || scroll().top + event.clientY;
            //3.获取盒子在整个页面的位置
            var xx = div.offsetLeft
            var yy = div.offsetTop
            //4.用鼠标的位置减去盒子的位置赋值给盒子的内容。
            var targetx = pagex - div.offsetLeft;
            var targety = pagey - yy;
            this.innerHTML = "鼠标在盒子中的X坐标为:"+targetx+"px;<br>鼠标在盒子中的Y坐标为:"+targety+"px;"
        }

    </script>

</body>
</html>

推荐阅读更多精彩内容