Mouse selection JS

HTML
<div id="container" onmousedown="start()" onmouseup="stop()" onmousemove="trascina()"> <h1>Drag to select</h1> <div id="selettore" style="display:none;"></div> <div class="icon"></div> <div class="icon"></div> <div class="icon"></div> <div class="icon"></div> </div>
SCSS
html,body{ margin: 0; padding: 0; } h1{ text-align: center; font-family: "Roboto"; color: white; font-weight: 300; border-bottom: 2px solid white; padding-bottom: 25px; } #container{ width: 100%; height: 100%; position: absolute; background: #666; padding-top: 40px; } .debug{ color: white; font-size: 24px; padding: 20px; } #selettore{ z-index: 100; background: #2196F3; border: 1px solid white; box-shadow: 0px 0px 3px black; opacity: 0.7; position: fixed; display: none; top: 0; left: 0; } .icon{ display: inline-block; margin: 40px; width: 140px; height: 150px; background: #111; border-radius: 10px; } #test{ color: white; font-size: 40px; } .selected{ background-color: red; box-shadow: 0px 5px 10px #222; }
JAVASCRIPT
var isMoving = false; var beginX = 0; var beginY = 0; var selectorX = 0; var selectorY = 0; var nowX = 0; var nowY = 0; var partenzaselettoreX; var partenzaselettoreY; var isFocus = false; var su = false; var giu = false; var destra = false; var sinistra = false; var num = $(".icon").length; function start(){ isMoving = true; beginX = window.event.clientX; beginY = window.event.clientY; for(var i = 0; i< num; i++){ $(".icon").eq(i).removeClass("selected"); } } function trascina(){ if(isMoving){ nowX = window.event.clientX; nowY = window.event.clientY; if(nowX > beginX){ partenzaselettoreX = beginX; destra = true; sinistra = false; }else{ partenzaselettoreX = nowX; sinistra = true; destra = false; } selectorX = Math.abs(beginX - nowX); if(nowY > beginY){ partenzaselettoreY = beginY; giu = true; su = false; } else{ partenzaselettoreY = nowY; su = true; giu = false; } selectorY = Math.abs(beginY - nowY); for(var i = 0; i< num; i++){ var rect = $(".icon").eq(i).get(0).getBoundingClientRect(); if(su && sinistra && !giu && !destra){ if(nowY < rect.bottom && nowX < rect.right && beginX > rect.left){ $(".icon").eq(i).addClass("selected"); }else{ $(".icon").eq(i).removeClass("selected"); } }else if(!su && !sinistra && giu && destra){ if(nowX > rect.left && nowY > rect.top && beginX < rect.right){ $(".icon").eq(i).addClass("selected"); }else{ $(".icon").eq(i).removeClass("selected"); } }else if(su && !sinistra && !giu && destra){ if(nowX > rect.left && nowY < rect.bottom && beginX < rect.right){ $(".icon").eq(i).addClass("selected"); }else{ $(".icon").eq(i).removeClass("selected"); } }else if(!su && sinistra && giu && !destra){ if(nowX < rect.right && nowY > rect.top && beginX > rect.left){ $(".icon").eq(i).addClass("selected"); }else{ $(".icon").eq(i).removeClass("selected"); } } } $("#selettore").show(); $("#selettore").css("margin-top",partenzaselettoreY); $("#selettore").css("margin-left",partenzaselettoreX); $("#selettore").css("width",selectorX); $("#selettore").css("height",selectorY); } } function stop(){ isMoving = false; $("#selettore").hide(); giu = false; destra = false; sinistra = false; su = false; }
Expand for more options Login