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;
}
