鼠標拖拽多選功能

*{

box-sizing:border-box;

}

ul{

width:500px;

height:auto;

margin:0;

padding:20px;

font-size: 0;

/*需設置定位*/

position:relative;

}

li{

width:70px;

height:70px;

margin:10px;

padding:0;

display:inline-block;

vertical-align: top;

font-size: 13px;

border:1px solid #d9d9d9;

}

#moveSelected{

position:absolute;

background-color: blue;

opacity:0.3;

border:1px dashed #d9d9d9;

top:0;

left:0;

}

.selected{

background-color: pink;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

$(document).ready(function(){

let moveSelected=$('#moveSelected')[0];

let flag=false;//是搜開啟拖拽的標志

let oldLeft=0;//鼠標按下時的left,top

let oldTop=0;

let selectedList=[];//拖拽多選選中的塊集合

// 鼠標按下時開啟拖拽多選，將遮罩定位并展現

$(".list").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(); // 阻止事件冒泡

});

// 鼠標移動時計算遮罩的位置，寬 高

$(".list").mousemove(function(event) {

if(!flag) return;//只有開啟了拖拽，才進行mouseover操作

if(event.pageX

moveSelected.style.left=event.pageX+'px';

moveSelected.style.width=(oldLeft-event.pageX)+'px';

}else{

moveSelected.style.width=(event.pageX-oldLeft)+'px';

}

if(event.pageY

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，找出遮罩覆蓋的塊，關閉拖拽選中開關，清除遮罩數據

$(".list").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(); // 阻止事件冒泡

});

$(".list").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=$('.list').find('li');

for(let i=0;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;

}

});

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的java鼠标左键按下后拖动实现多选_鼠标拖拽多选功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。