day21（元素拖拽小案例）

最新推荐文章于 2024-07-17 15:26:15 发布

阿駷

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量530

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/m0_49992474/article/details/122330775

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

元素拖拽边缘管理，轨迹及回放

知识点：

边缘管理：右边和下边需要减去盒子自身的宽高
每次获取得坐标值需要存储到数组中
点击回放按钮时，需要给数组第一个添加一个0，0的坐标对象，不然不能回到原位
当数组为空时，清除定时器，结束回放
合理使用各种坐标值和自身宽高的属性
数组的删除返回的是删除的那个元素
当放开鼠标时，需要清除按下和移动事件，优化代码

   <script type="text/javascript">
        window.onload = function () {
       		//获取元素
            var box = document.querySelector("div");
            var reset = document.querySelector("input");
       		//定义一个空数组来接受，每次变化的left和top值
            var list = [];
       		//鼠标按下盒子，获取鼠标在当前盒子的left值和top值
            box.onmousedown = function (ev) {
                ev = ev || window.event;
                var boxX = ev.offsetX;
                var boxY = ev.offsetY;
				//盒子移动时间
                document.onmousemove = function (ev) {
                    ev = ev || event;
                    //获取ev.pagex,y,获取鼠标到页面边缘的top和left值，减去之前的值
                    var x = ev.pageX - boxX;
                    var y = ev.pageY - boxY;
					//边缘管理
                    if (x < 0) {
                        x = 0
                        		//页面的宽度减去盒子自身的宽度
                    } else if (x > innerWidth - box.offsetWidth) {
                        x = innerWidth - box.offsetWidth;
                    }
                    if (y < 0) {
                        y = 0      //页面的高度度减去盒子自身的高度度
                    } else if (y > innerHeight - box.offsetHeight) {
                        y = innerHeight - box.offsetHeight;
                    }
                    //给盒子定位赋值
                    box.style.left = x + "px";
                    box.style.top = y + "px";
                    //同时产生一个小的p标签，标记轨迹
                    var box2 = document.createElement("span")
                    //给轨迹赋值
                    box2.style.left = x + "px";
                    box2.style.top = y + "px";
                    document.body.appendChild(box2);
					//将轨迹的坐标通过对象的形式添加到数组中
                    list.push({
                        x: x,
                        y: y
                    });
                }
                //鼠标清除
                document.onmouseup = function () {
                    //清除鼠标按下和移动时间
                    document.onmousemove = null;
                    box.onmousedouw = null;
                }
            }
       		//清除按钮，回放事件
            reset.onclick = function (ev) {
                ev = ev || window.event;
                //清除reset重置的默认行为
                ev.defaultPrevented ? ev.defaultPrevented() : ev.returnValue = false;
                //给数组第一个位置添加0，0的坐标，防止盒子不能回到原位
                list.unshift({
                    x: 0,
                    y: 0
                })
                //设置定时器
                var timer = setInterval(function(){
                    //判断数组是否为空，为空则停止定时器
                    if(list ==  null ){
                        clearInterval(timer);
                    }
                    //通过pop()每次删除最后一个数组的值，返回值为删除的那个元素
                    var last = list.pop();
                    //通过返回值之前保存的对象形式，获取到x和y值，然后给box赋值
                    box.style.left = last.x + "px";
                    box.style.top = last.y + "px";
                },50)
            }
        }
    </script>
</head>
<body>
    <div>
        元素拖拽
    </div>
    <input type="reset" value="重置">

</body>

元素拖拽，精度条

知识点：

event.clientX event.clientX 获取鼠标距浏览器可视区域的位置
box.offsetLeft box.offsetTop 获取盒子本身的距离父级定位的位置
box.offsetWidth box.offsetHeight 获取盒子自身的宽高
最后清除点击和移动事件，优化代码
获取对之间的关系和差值

<body>
    <div id="progress">
        <div>
            <p></p>
            <p></p>
        </div>
        <span>0%</span>
    </div>
    <script>
        var sp = document.querySelector("span");
        var aP1 = document.querySelectorAll("p")[0];
        var aP2 = document.querySelectorAll("p")[1];
        var box = document.querySelector("#progress>div");
        // console.log(aP,box)
        aP2.onmousedown = function(ev){
            //获取event对象，获取event对象中鼠标的位置
            ev = ev || window.event;
            //计算出鼠标位置和拖动块之间的差值
            var x = ev.clientX - aP2.offsetLeft;
            
            document.onmousemove = function(ev){
                ev = ev || window.event;
                //移动时，通过获取鼠标的位置与x的差值得到盒子的与父级定位的位置
                var moveX = ev.clientX - x;
                //边界管理
                if(moveX < 0){
                    moveX = 0;
                }else if(moveX > box.offsetWidth - aP2.offsetWidth){
                    moveX = box.offsetWidth - aP2.offsetWidth;
                }
                aP2.style.left = moveX + "px";
                //给红色盒字设置宽度，表示进度条的长度
                aP1.style.width = moveX + "px";
                //通过移动和总长度计算百分比
                var percentage = parseInt(moveX/ (box.offsetWidth - aP2.offsetWidth)*100);
                sp.innerHTML = percentage+"%";
                // 当进度条移动过快时，有些浏览器会默认给一个禁止拖拽的图片，属于浏览器的鼠标移动默认行为
                return false
            }
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    </script>
</body>

实现效果

在这里插入图片描述

阿駷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
day21（元素拖拽小案例）

元素拖拽边缘管理，轨迹及回放知识点：边缘管理：右边和下边需要减去盒子自身的宽高每次获取得坐标值需要存储到数组中点击回放按钮时，需要给数组第一个添加一个0，0的坐标对象，不然不能回到原位当数组为空时，清除定时器，结束回放合理使用各种坐标值和自身宽高的属性数组的删除返回的是删除的那个元素当放开鼠标时，需要清除按下和移动事件，优化代码 <script type="text/javascript"> window.onload = f
复制链接

扫一扫