最近用js做了一个拖放多选的功能，于是整理了一下思路，写了一个小演示：

出现掩码：

蒙版覆盖的是选定的块(背景色是粉色)

以下是具体代码，注释在正文中，可以和大家交流。

！DOCTYPE htmlhtmlhead标题鼠标拖拽多选功能/title脚本src=' http :https://cdn。bootscs。com/jquery/1。10 .2/jquery。量滴js '/脚本样式类型=' text/CSS ' * { box-siz : border-box；} ul { width :500 px heart : auto margin :0 padd :20 px font-size : 0；/*需设置定位*/位置：相对；} li { width:70px高度：70 pxmargin:10px划水：0;显示：内嵌块；垂直对齐： 顶部；font-size : 13pxborder:1px实心# d9d 9；} # moveSelected { position : absolute；背景-颜色：蓝色；opa city 33600.3 border :1 px虚线# d9d 9；top:0left:0}。选中{背景-颜色：粉色；}/style/header dy ul class=' list ' li1/Li Li 2/Li Li/Li Li 4/Li Li 5/Li Li 6/Li Li 7/Li Li 8/Li Li 9/Li Li 10/Li Li 11/Li Li 12/Li Li 13/Li Li 14/Li Li 15/Li Li 16/Li Li 17/Li Li 18/李丽丽19/李丽丽20/李丽丽21/李丽丽22/Li！-鼠标拖拽出的遮罩（定位为position:absolute()！-遮罩最好是在绑定了鼠标悬停事件的元素内部，并且不要阻止遮罩的冒泡事件。

这样鼠标移到了遮罩上面，依然可以利用冒泡执行父元素的鼠标悬停事件，就不会出现遮罩只能扩大，不能缩小的情况了（亲自试过)-div id=' moveSelected '/div/ul/body/html脚本类型=' text/JavaScript ' $(文档)。ready(function(){ let move selected=$(' # move selected ')[0]；let flag=false//是搜开启拖拽的标志设oldLeft=0；//鼠标按下时的左，顶部让old top=0；让选定列表=[]；//拖拽多选选中的块集合//鼠标按下时开启拖拽多选，将遮罩定位并展现$('.列表')。鼠标向下(函数（事件){ flag=truemoveselected。风格。top=事件。Pagey ' px移动选定的。风格。左=事件。PageX ' pxoldLeft=event . page xoldtop=event . page yevent。prevent default()；//阻止默认行为事件。stopperpagation()；//阻止事件冒泡});//鼠标移动时计算遮罩的位置，宽高$('.列表')。鼠标移动(函数（事件){ if(！标志)返回；//只有开启了拖拽，才进行鼠标悬停操作if(event.pageXoldLeft){//向左拖移动选定的。风格。左=事件。PageX ' px移动选定的。风格。width=(oldLeft-event。pagex)“px”；} else { moveselected。风格。width=(事件。pagex-oldLeft)' px '；} if(event.pageYoldTop){//向上移动选定的。风格。top=事件。Pagey ' px移动选定的。风格。高度=(oldTop-event。pagey)' px '；} else { moveselected。风格。高度=(事件。pagey-old top)' px '；}活动。PreventDefault()；//阻止默认行为事件。stopperpagation()；//阻止事件冒泡});//鼠标抬起时计算遮罩的正确和底部，找出遮罩覆盖的块，关闭拖拽选中开关，清除遮罩数据$('.列表')。mouseup(函数（事件){ moveselected。风格。底部=数字(移动选定。风格。顶部。拆分(' px ')[0])数量(移动选定。风格。身高。拆分(' px '[0])“px”；移动选定的。风格。右=数字(移动选定。风格。向左。拆分(' px '[0])数量(移动选定。风格。宽度。拆分(' px '[0])“px”；查找选定的()；flag=false cleardragdata()；事件。prevent default()；//阻止默认行为事件。stopperpagation()；//阻止事件冒泡});$('.列表')。mouseleave(函数（事件){ flag=falsemoveselected。风格。宽度=0；移动选定的。风格。高度=0；移动选定的。风格。top=0；移动选定的。风格。left=0；事件。prevent default()；//阻止默认行为事件。stopperpagation()；//阻止事件冒泡});函数findSelected(){让blockList=$(' .列表')。find(' Li ')；用于(设I=0；iblockList.lengthi ){ //计算每个块的定位信息让左=$(阻止列表[i]).偏移量()。向左；让右=$(阻止列表[i]).宽度()左侧；让top=$(阻止列表[i]).偏移量()。顶部；让底部=$(阻止列表[i]).高度()顶部；//判断每个块是否被遮罩盖住（即选中)让左标志=选择移动。风格。向左。拆分(' px ')[0]=向左移动=选择移动。风格。没错。拆分(' px ')[0]；让右标志=选择移动。风格。向左。拆分(' px ')[0]=向右向右=选择移动。风格。没错。拆分(' px ')[0]；让topFlag=移动所选内容。风格。顶部。拆分(' px ')[0]=顶部顶部=选定移动。风格。底部。拆分(' px ')[0]；让底部标志=选择移动。风格。顶部。拆分(' px ')[0]=底部底部=选定移动。风格。底部。拆分(' px ')[0]；if((左标志| |右标志)(上标志| |下标志)){选定列表。推送(阻止列表[I])；$(阻止列表[i]).addClass(')选定');} }控制台。日志(选定列表)；}函数clearDragData(){ moveselected。风格。宽度=0；移动选定的。风格。高度=0；移动选定的。风格。top=0；移动选定的。风格。left=0；移动选定的。风格。底部=0；移动选定的。风格。右=0；} });/script以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。