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

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

先说拖动，思路就是利用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() {}）代码块中的代码，

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

完美解决！