• 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;
                    }
    
                }
  • 相关阅读:
    Filebeat 日志收集器 安装和配置
    纠错式教学法对比鼓励式教学法 -----Lily、贝乐、英孚,乐加乐、剑桥国际、优学汇、北外青少
    硅谷夜谈
    指路Reactive Programming
    Spring WebFlux 要革了谁的命?
    flink部署操作-flink standalone集群安装部署
    Flink的高可用集群环境
    当怪物来敲门 经典台词
    浅析几种线程安全模型
    最详细的排序解析,理解七大排序
  • 原文地址:https://www.cnblogs.com/chendezhen/p/15881835.html
Copyright © 2020-2023  润新知