js 鼠标上下拖拽div边框改变大小，不影响div里面元素事件

最近要求做一个鼠标上下拖拽div改变整个页面布局的功能。div里面是layui渲染的table。然后拖动到table的单元格就会触发拖拽事件。折腾许久。最后用定位方法解决。使用起来非常流程。

特来记载代码如下：

        $(function () {
            绑定需要拖拽改变大小的元素对象 
            bindResize(document.getElementById('bottomdiv'));//需要拖拽的div元素
        });

        var hasMove = false;  //全局标识，初始化标识元素没有发生mousemove
        function bindResize(el) {

            //初始化参数 
            var els = el.style,

                //鼠标的 X 和 Y 轴坐标 
                x = y = 0;
            $(el).mousedown(function (e) {
                //按下元素后，计算当前鼠标与对象计算后的坐标 
                y = e.clientY - el.offsetHeight;
                var div = $("#bottomdiv .layui-table-page")[0];//div里面table的分页框。这里需要div里面的某个元素作为参数。以方便后面的计算
                var selectY = e.clientY;
                var divy1 = div.offsetTop;
                var divy2 = div.offsetTop + div.offsetHeight;
                if (selectY < divy1 || y > divy2) {//计算鼠标拖拽位置是否在div内。如果是触发div里面的元素则直接返回
                    return;
                }

                //在支持 setCapture 做些东东 
                el.setCapture ? (
                    //捕捉焦点 
                    el.setCapture(),
                    //设置事件 
                    el.onmousemove = function (ev) {
                        mouseMove(ev || event)
                    },
                    el.onmouseup = mouseUp
                ) : (
                        //绑定事件 
                        $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
                    )
                hasMove = false;
                //防止默认事件发生 
                e.preventDefault()
            });
            //移动事件 
            function mouseMove(e) {

                //宇宙超级无敌运算中... 
                hasMove = true;
                els.height = e.clientY - y + 'px'

            }
            //停止事件 
            function mouseUp() {
                //在支持 releaseCapture 做些东东 
                el.releaseCapture ? (
                    //释放焦点 
                    el.releaseCapture(),
                    //移除事件 
                    el.onmousemove = el.onmouseup = null
                ) : (
                        //卸载事件 
                        $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
                    )
                if (hasMove) {
                    console.log("改变状态");
                    layui.use('table', function () {
                        var table = layui.table;
                        contentHeight = windowHeight - topTitleHeight - 75 - $("#bottomdiv").height() - ultitle;
                        tabletopheight = $("#bottomdiv").height();

                        table.reload('test', {
                            height: $("#bottomdiv").height()
                        })
                        

                        //水表
                        table.reload('test1w', {
                            height: contentHeight
                        })
                        

                    })
                } else {
                    //console.log("没有移动鼠标松开事件,模拟click");
                }

                hasMove = false;  //还原标识，以便下一次使用

            }
        }