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

王冬阳

于 2020-07-21 15:31:05 发布

阅读量3.4k

点赞数 1

分类专栏：前端---技术博客

本文链接：https://blog.youkuaiyun.com/wangdongyanglys/article/details/107459738

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

先说拖动，思路就是利用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) {  //如果左侧的距离小于0，就让距离等于0.不能超出屏幕左侧。如果需要磁性吸附，把0改为100或者想要的数字即可

                    L = 0;

最低0.47元/天解锁文章