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

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

先说拖动,思路就是利用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;

                } else if (L > document.documentElement.clientWidth - oDiv.offsetWidth) {  //如果左侧的距离>屏幕的宽度-元素的宽度。也就是说元素的右侧超出屏幕的右侧,就让元素的右侧在屏幕的右侧上

                    L = document.documentElement.clientWidth - oDiv.offsetWidth;

                }



                if (T < 0) {  //和左右距离同理

                    T = 0;

                } else if (T > document.documentElement.clientHeight - oDiv.offsetHeight - 50) {

                    T = document.documentElement.clientHeight - oDiv.offsetHeight - 50;

                }



                oDiv.style.left = L + 'px';

                oDiv.style.top = T + 'px';

                // 判断当前拖动的图片位置,如果高度大于屏幕的一半,ul向上弹出,如果小于一半,向下弹出;

                if (L > (document.documentElement.clientWidth) / 2) {

                    $('.dataList').css({"right": "100%", "left": "inherit"})



                } else if (L < (document.documentElement.clientWidth) / 2) {

                    // dataList()方法里的内容向右弹出

                    $('.dataList').css({"left": "100%"})

                }

                // 弹出位置需要考虑iframe上面的大小

                if (T > (document.documentElement.clientHeight) / 2 - 120) {

                    // 向下弹出

                    $('.intellectShow').addClass('intellectShowTop')

                    $('.intellectShow').removeClass('intellectShowBottom')

                } else if (T < (document.documentElement.clientHeight) / 2 + 120) {

                    // 向上弹出

                    $('.intellectShow').addClass('intellectShowBottom')

                    $('.intellectShow').removeClass('intellectShowTop')

                }

                isDrag = true;

            }

// 鼠标移出onmouseleave事件

            this.onmouseleave = function () {

                document.onmousemove = document.onmouseup = null;

                isDrag = false;

            }

            document.onmouseup = function () {

                document.onmousemove = document.onmouseup = null;

                if (oDiv.releaseCapture) {

                    oDiv.releaseCapture();

                }



            }

            return false;



        }

 

有了上面的代码就可以拖动了,但是在拖动的时候会卡顿,原因是当前项目用的是iframe嵌套,于是乎查找资料,说是iframe是加载别的页面,鼠标在iframe页面时,相当于处在别的页面里面,所以拖拽失效。

解决办法:

           拖曳时在iframe上方放置一个透明的图层用来覆盖,这样拖曳过程其实是在这个透明的图层上进行的,所以就不会存在卡顿问题;整体思路就是想方设法挡住iframe,具体iframe为什么会导致拖曳卡顿,不是很清楚,

在拖动的时候  加上$("iframe").each(function() {})代码块中的代码,

鼠标抬起的时候加上下面的代码

完美解决!

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页