标签：Jquery 遮罩 style moveSelectedBase moveSelected px 按下 var event
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。