拖动页面上的某个元素及卡顿问题解决方案

最新推荐文章于 2023-05-06 15:59:06 发布

原创

最新推荐文章于 2023-05-06 15:59:06 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了一个在页面中实现可拖动元素并确保流畅性的方法。使用jQuery的mousemove, mousedown, mouseup事件实现拖动功能，但遇到在iframe中拖动时的卡顿问题。为解决这个问题，提出了在iframe上覆盖透明图层的策略，避免直接在iframe内操作导致的卡顿，通过在拖动和鼠标抬起时添加特定代码块，成功解决了拖动卡顿的问题。" 77113428,7218980,Ubuntu搭建MIPS交叉编译环境步骤,"['Linux', '交叉编译', 'Ubuntu', 'MIPS架构', '嵌入式开发']

在做公司项目的时候，有个需求，某个元素能在页面可视范围内随意拖动，可折叠展开的，而且不卡顿，根据页面中心线的位置让当前可拖动元素里面的内容在展开的时候，保证内容能看全。

先说拖动，思路就是利用jquery的mousemove，mousedown，mouseup三个事件，定义两个相对位置。代码如下：

oDiv.onmousedown = function (ev) {

            var ev = ev || event;



            var disX = ev.clientX - this.offsetLeft;

            var disY = ev.clientY - this.offsetTop;



            if (oDiv.setCapture) {

                oDiv.setCapture();

            }



            document.onmousemove = function (ev) {

                var ev = ev || event;



                var L = ev.clientX - disX; //拖动元素左侧的位置=当前鼠标距离浏览器左侧的距离 - （物体宽度的一半）

                var T = ev.clientY - disY; //拖动元素顶部的位置=当前鼠标距离浏览器顶部的距离 - （物体高度的一半）



                if (L < 0) { &nb

最低0.47元/天解锁文章