Este artículo comparte con usted el ejemplo de JavaScript para implementar la operación de selección de cuadros del mouse, que de ninguna manera hace clic para seleccionar, para su referencia. El contenido específico es el siguiente
Imagen de reproducción:
Código:
<html> <head></head> <style> body{padding:100px;} .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #ccc;margin-right:10px;margin-bottom:10px;} .seled {border: 1px sólido rojo; de fondo:#d6dff7;} </style> <script type = "text/javaScript"> (function () {document.onmouseDown = function () {var sellist = []; var fileNodes = document.getElementSByTagName ("DivId"); for (var i = 0; i <filenodes.lLInp. (FileNodes [i] .ClassName.indexOf ("FileDiv")! = -1) (evt.y || evt.clienty); #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;"; selDiv.id = "selectDiv"; document.body.appendChild(selDiv); selDiv.style.left = startX + "px"; selDiv.style.top = startY + "px"; var _x = NULL; = (evt.y || evt.clienty); Math.abs (_y-Starty) + "Px"; SelDiv.OffSettop; && st> _t && sellist [i] .OffsetLeft <_l + _W && Sellist [i] .OffSettop <_t + _h) {if (sellist [i] .classname.indexof ("seleccionado") == -1) {sellist [i] .className = sellist [i] .classname + "seled"; (Sellist [i] .ClassName.IndexOf ("Seled")! = -1) {Sellist [i] .ClassName = "FileDiv"; } sellist = null, _x = null, _y = null, seldiv = null, startx = null, starty = null, evt = null; función ClearEventBubble (evt) {if (evt.stoppropagation) evt.stoppropagation (); else evt.cancelbubble = true; if (evt.preventDefault) evt.preventDefault (); más evt.returnValue = false; } función showSelDiv (arr) {var cuenta = 0; var selinfo = ""; for (var i = 0; i <arr.length; i ++) {if (arr [i] .classname.indexof ("seled")! = -1) {count ++; selinfo + = arr [i] .innerhtml + "/n"; }} alerta ("seleccionar" + count + "archivos, que son: /n" + selinfo); } </script> <body> <div> file1 </div> <div> file2 </div> <div> file3 </div> <div> file4 </div> <div> file5 </div> <div> file6 </div> <div> file7 </div> <div> file8 </div> file9 <biv> </body> </html>Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.