Jquery 鼠标按下时开启拖拽多选，将遮罩定位并展现

            moveShade: function () {
                var _this = this;
                var moveSelected = $("#moveSelected")[0];
                var moveSelectedBase = $(".demobox");
                var flag = false; //是搜开启拖拽的标志
                var oldLeft = 0; //鼠标按下时的left,top
                var oldTop = 0;
                var selectedList = []; //拖拽多选选中的块集合

                // 鼠标按下时开启拖拽多选，将遮罩定位并展现
                moveSelectedBase.mousedown(function (event) {
                    flag = true;
                    moveSelected.style.top = event.pageY - moveSelectedBase.offset().top + moveSelectedBase.scrollTop() + "px";
                    moveSelected.style.left = event.pageX - moveSelectedBase.offset().left+ moveSelectedBase.scrollLeft() + "px";
                    oldLeft = event.pageX;
                    oldTop = event.pageY;
                    event.preventDefault(); // 阻止默认行为
                    event.stopPropagation(); // 阻止事件冒泡
                });

                // 鼠标移动时计算遮罩的位置，宽 高
                moveSelectedBase.mousemove(function (event) {
                    if (!flag) return; //只有开启了拖拽，才进行mouseover操作

                    if (event.pageX < oldLeft) {
                        //向左拖
                        moveSelected.style.left = event.pageX - moveSelectedBase.offset().left+moveSelectedBase.scrollLeft() + "px";
                        moveSelected.style.width = oldLeft - event.pageX + "px";
                    } else {
                        moveSelected.style.width = event.pageX - oldLeft + "px";
                    }
                    if (event.pageY < oldTop) {
                        //向上
                        moveSelected.style.top = event.pageY - moveSelectedBase.offset().top + moveSelectedBase.scrollTop() + "px";
                        moveSelected.style.height = oldTop - event.pageY + "px";
                    } else {
                        moveSelected.style.height = event.pageY - oldTop + "px";
                    }

                    event.preventDefault(); // 阻止默认行为
                    event.stopPropagation(); // 阻止事件冒泡
                });

                //鼠标抬起时计算遮罩的right 和 bottom，找出遮罩覆盖的块，关闭拖拽选中开关，清除遮罩数据
                moveSelectedBase.mouseup(function (event) {

                    moveSelected.style.bottom =
                            Number(moveSelected.style.top.split("px")[0]) +
                            Number(moveSelected.style.height.split("px")[0]) +
                            "px";
                    moveSelected.style.right =
                            Number(moveSelected.style.left.split("px")[0]) +
                            Number(moveSelected.style.width.split("px")[0]) +
                            "px";

                    findSelected();
                    flag = false;
                    clearDragData();
                    event.preventDefault(); // 阻止默认行为
                    event.stopPropagation(); // 阻止事件冒泡
                });

                moveSelectedBase.mouseleave(function (event) {
                    flag = false;
                    moveSelected.style.width = 0;
                    moveSelected.style.height = 0;
                    moveSelected.style.top = 0;
                    moveSelected.style.left = 0;
                    event.preventDefault(); // 阻止默认行为
                    event.stopPropagation(); // 阻止事件冒泡
                });

                function findSelected() {
                    var blockList = $('#seat-maps').seatCharts().node();
                    selectedList = [];  //初始化每次块选中的列表
                    for (var i = 0; i < blockList.length; i++) {
                        //计算每个块的定位信息
                        var left = $(blockList[i]).offset().left - moveSelectedBase.offset().left + moveSelectedBase.scrollLeft();
                        var right = $(blockList[i]).width() + left;
                        var top = $(blockList[i]).offset().top - moveSelectedBase.offset().top + moveSelectedBase.scrollTop();
                        var bottom = $(blockList[i]).height() + top;

                        //判断每个块是否被遮罩盖住（即选中）使用相对位置计算块与遮罩层是否有交叉
                        var moveLeft = moveSelected.style.left.split("px")[0];
                        var moveRight = moveSelected.style.right.split("px")[0];
                        var moveTop = moveSelected.style.top.split("px")[0];
                        var moveBottom = moveSelected.style.bottom.split("px")[0];

                        var absX = Math.abs(left+right-moveLeft-moveRight);
                        var x = Math.abs(right-left)+Math.abs(moveLeft-moveRight);
                        var absY = Math.abs(top+bottom-moveTop-moveBottom);
                        var y = Math.abs(top-bottom)+Math.abs(moveTop-moveBottom);

                        if (absX <= x && absY <= y) {
                            selectedList.push(blockList[i]);
                        }
                    }
                    if (selectedList.length>1){
                        _this.staffIndex = -1;
                        _this.nowUserData = null;
                        var sameSeat = 0;
                        //框选中包含不同部门座位，都转为同一个部门座位
                        for (var j = 0;j < selectedList.length;j++){
                            if ($(selectedList[j]).attr("dept_isother")!=undefined && $(selectedList[j]).attr("dept_isother") === _this.isOther.toString()
                                    && $(selectedList[j]).attr("dept_seatindex") && $(selectedList[j]).attr("dept_seatindex") == _this.deptIndex) {
                                sameSeat+=1;
                                continue
                            }

                            $(selectedList[j]).click();
                        }
                        //如果框选的是同一个部门的座位，则相当于取消座位
                        if (selectedList.length == sameSeat){
                            for (var j = 0;j < selectedList.length;j++){
                                $(selectedList[j]).click();
                            }
                        }
                    }
                }

                function clearDragData() {
                    moveSelected.style.width = 0;
                    moveSelected.style.height = 0;
                    moveSelected.style.top = 0;
                    moveSelected.style.left = 0;
                    moveSelected.style.bottom = 0;
                    moveSelected.style.right = 0;
                }

            }

标签：Jquery,遮罩,style,moveSelectedBase,moveSelected,px,按下,var,event
来源： https://www.cnblogs.com/chendezhen/p/15881835.html