<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta charset="utf-8">
<style>
#mybody {
background-image: url('/2DService/img/42U.png');
background-size: 203px 800px;
background-repeat: no-repeat;
background-position: left top;
/*height: 1050px;*/
/*margin: 0;*/
padding: 0;
background-color: #eff4f0;
}
.mainDiv {
width: 267px;
height: 50px;
/**/
/*margin: 0 auto;*/
margin: 0 0 0 144px;
zoom:normal;
}
.top {
margin-top: 45px;
}
.bb {
background-color: rgba(255, 0, 0, 0.5);
width: 193px;
height: 20.3px;
line-height: 20.3px;
margin: auto;
/*margin-left:-122px;*/
margin: 0 0 0 0;
}
.bb2 {
position: absolute;
/**/
background-color: rgba(255, 0, 0, 0.5);
width: 224px;
height: 21.8px;
margin: auto;
margin-bottom: -3px;
/*margin: 0 47px;*/
/*margin-top: -19px;*/
}
.black {
background-color: black;
width: 193px;
height: 20.3px;
margin-left: -121px;
line-height: 18.5px;
margin-top: 1.45px;
text-align: center;
color: aliceblue;
position: relative;
cursor: pointer;
font-size: 12px;
}
.black2 {
width: 193px;
height: 20.3px;
margin-left: -121px;
line-height: 18.5px;
margin-top: 1.45px;
text-align: center;
color: aliceblue;
position: relative;
cursor: pointer;
font-size: 14px;
}
.hoverbac {
background-color: rgba(240, 248, 255, 0.5);
width: 193px;
height: 20.3px;
margin: auto;
line-height: 18.5px;
margin: 1.5px 0 0 -121px;
}
#Selected {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
border-radius: 2px;
}
.myul {
list-style: none;
padding: 1px;
text-align: center;
color: white;
margin: 1px;
}
.myul li {
margin-top: 1px;
}
#moveSelected{
position:absolute;
background-color:coral;
opacity:0.3;
border:1px dashed #d9d9d9;
top:0;
left:0;
}
.selected{
background-color: pink;
}
</style>
</head>
<body id="mybody">
<div class="mainDiv top" id="MyDiv">
<div isrent="false" num="42" class="black" "="">
42
</div>
<div isrent=" false" num="41" class="black" "="">
41
</div>
<div isrent=" false" num="40" class="black" "="">
40
</div>
<div isrent=" false" num="39" class="black" "="">
39
</div>
<div isrent=" false" num="38" class="black" "="">
38
</div>
<div isrent="
false" num="37" class="black" "="">
37
</div>
<div isrent=" false" num="36" class="black" "="">
36
</div>
<div isrent=" false" num="35" class="black" "="">
35
</div>
<div isrent=" true" num="34" class="black" "="">
<div class=" bb">
34
</div>
</div>
<div isrent="false" num="33" class="black" "="">
33
</div>
<div isrent=" false" num="32" class="black" "="">
32
</div>
<div isrent=" false" num="31" class="black" "="">
31
</div>
<div isrent=" false" num="30" class="black" "="">
30
</div>
<div isrent=" false" num="29" class="black" "="">
29
</div>
<div isrent="
false" num="28" class="black" "="">
28
</div>
<div isrent=" false" num="27" class="black" "="">
27
</div>
<div isrent=" false" num="26" class="black" "="">
26
</div>
<div isrent=" false" num="25" class="black" "="">
25
</div>
<div isrent=" false" num="24" class="black" "="">
24
</div>
<div isrent="
false" num="23" class="black" "="">
23
</div>
<div isrent=" false" num="22" class="black" "="">
22
</div>
<div isrent=" false" style="background-color: #8B864E;" num="21" class="black2" "="">
21
</div>
<div isrent=" false" num="20" class="black" "="">
20
</div>
<div isrent=" false" num="19" class="black" "="">
19
</div>
<div isrent=" false" num="18" class="black" "="">
18
</div>
<div isrent="
false" num="17" class="black" "="">
17
</div>
<div isrent=" false" num="16" class="black" "="">
16
</div>
<div isrent=" false" num="15" class="black" "="">
15
</div>
<div isrent=" true" num="14" class="black" "="">
<div class=" bb">
14
</div>
</div>
<div isrent="true" num="13" class="black" "="">
<div class=" bb">
13
</div>
</div>
<div isrent="true" num="12" class="black" "="">
<div class=" bb">
12
</div>
</div>
<div isrent="false" num="11" class="black" "="">
11
</div>
<div isrent=" false" num="10" class="black" "="">
10
</div>
<div isrent=" false" num="9" class="black" "="">
9
</div>
<div isrent=" false" num="8" class="black" "="">
8
</div>
<div isrent=" false" num="7" class="black" "="">
7
</div>
<div isrent=" false" num="6" class="black" "="">
6
</div>
<div isrent=" false" num="5" class="black" "="">
5
</div>
<div isrent=" false" num="4" class="black" "="">
4
</div>
<div isrent=" false" num="3" class="black" "="">
3
</div>
<div isrent=" false" num="2" class="black" "="">
2
</div>
<div isrent=" false" num="1" class="black" "="">
1
</div>
<div id="moveSelected"></div>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
let moveSelected=$('div#moveSelected')[0];
let flag=false;//是搜开启拖拽的标志
let oldLeft=0;//鼠标按下时的left,top
let oldTop=0;
let selectedList=[];//拖拽多选选中的块集合
// 鼠标按下时开启拖拽多选，将遮罩定位并展现
$("#MyDiv").mousedown(function(event) {
flag=true;
moveSelected.style.top=event.pageY+'px';
moveSelected.style.left=event.pageX+'px';
oldLeft=event.pageX;
oldTop=event.pageY;
event.preventDefault(); // 阻止默认行为
event.stopPropagation(); // 阻止事件冒泡
});
// 鼠标移动时计算遮罩的位置，宽 高
$("#MyDiv").mousemove(function(event) {
if(!flag) return;//只有开启了拖拽，才进行mouseover操作
if(event.pageX<oldLeft){//向左拖
moveSelected.style.left=event.pageX+'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+'px';
moveSelected.style.height=(oldTop-event.pageY)+'px';
}else{
moveSelected.style.height=(event.pageY-oldTop)+'px';
}
event.preventDefault(); // 阻止默认行为
event.stopPropagation(); // 阻止事件冒泡
});
//鼠标抬起时计算遮罩的right 和 bottom，找出遮罩覆盖的块，关闭拖拽选中开关，清除遮罩数据
$("#MyDiv").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(); // 阻止事件冒泡
});
$("#MyDiv").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(){
let blockList=$('#MyDiv').find('div');
for(let i=0;i<blockList.length;i++){
//计算每个块的定位信息
let left=$(blockList[i]).offset().left;
let right=$(blockList[i]).width()+left;
let top=$(blockList[i]).offset().top;
let bottom=$(blockList[i]).height()+top;
//判断每个块是否被遮罩盖住（即选中）
let leftFlag=moveSelected.style.left.split('px')[0]<=left && left<=moveSelected.style.right.split('px')[0];
let rightFlag=moveSelected.style.left.split('px')[0]<=right && right<=moveSelected.style.right.split('px')[0];
let topFlag=moveSelected.style.top.split('px')[0]<=top && top<=moveSelected.style.bottom.split('px')[0];
let bottomFlag=moveSelected.style.top.split('px')[0]<=bottom && bottom<=moveSelected.style.bottom.split('px')[0];
if((leftFlag || rightFlag) && (topFlag || bottomFlag)){
selectedList.push(blockList[i]);
$(blockList[i]).addClass('selected');
}
}
console.log(selectedList);
}
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;
}
});
</script>
浙公网安备 33010602011771号