Queria saber como é o nome desse 'efeito' ('-') que serve para selecionar pastas e arquivos no Windows Explorer.
E se possível queria saber como fazer isso com JavaScript puro.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeA principal característica desse "efeito" é ter um retângulo criado durante o processo de seleção para demarcar a área que está sendo selecionada. Ele tem um vértice no ponto inicial do clique e o outro que acompanha o cursor, e só é visível enquanto segurando o mouse.
Primeiro criamos uma <div>
invisível e aplicamos algum CSS para dar o visual desejado:
<div id="selection"></div>
#selection {
display: none;
position: absolute;
background: lightblue;
border-color: blue;
border-width: 1px;
border-style: solid;
opacity: .5;
}
Tendo isso vamos nos basear nos eventos onmousedown
, onmousemove
e onmouseup
para criar o comportamento. Segue o código:
(function() {
var beginX, beginY; // a posição do vértice fixo
var active; // se a seleção está ativa (visível)
var selection = document.getElementById("selection"); // o elemento
window.onmousedown = function (e) {
beginX = e.clientX;
beginY = e.clientY;
active = true;
selection.style.display = "block"; // deixar a div visível
window.onmousemove(e); // forçar a atualização de posição (função abaixo)
};
window.onmousemove = function (e) {
if (active) {
// cx,cy = a posição do segundo vértice
var cx = e.clientX;
var cy = e.clientY;
// x,y,w,h = o retângulo entre os vértices
var x = Math.min(beginX, cx);
var y = Math.min(beginY, cy);
var w = Math.abs(beginX - cx);
var h = Math.abs(beginY - cy);
// aplicar a posição e o tamanho
selection.style.left = x+"px";
selection.style.top = y+"px";
selection.style.width = w+"px";
selection.style.height = h+"px";
}
};
window.onmouseup = function (e) {
active = false; // desligar
selection.style.display = "none"; // e ocultar
};
})();
Para manter o cursor estável como uma seta e evitar que fique mudando para outros durante a seleção (experimente clicar e arrastar em uma página vazia, ele muda), usarei esse CSS. Não é exatamente bonito, mas funciona:
* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
Aqui o resultado até agora: JSFiddle.
Agora temos um retângulo como desejável. Mas ele não tem função alguma por enquanto. Falta criar coisas selecionáveis. Vamos criar algumas:
<div class="selectable">A</div>
<div class="selectable">B</div>
<div class="selectable">C</div>
<div class="selectable">D</div>
<div class="selectable">E</div>
<div class="selectable">F</div>
<div class="selectable">G</div>
<div class="selectable">H</div>
.selectable {
font-size: 3em;
background-color: lightgray;
border-radius: 10px;
display: inline-block;
width: 100px;
line-height: 100px;
margin: 10px;
text-align: center;
}
Isso deve criar um monte de quadradinhos com letras. Nossos alvos. Para fazer a seleção interagir com eles basta que toda a vez que o mouse for movido se verifique a quais itens o retângulo de seleção se sobrepõe. Tudo que precisa ser feito é uma checagem de colisão de retângulos dentro de um loop. Para se obter o retângulo de cada item usa-se a função getBoundingClientRect()
. No fim da função onmousemove
:
// procurar elementos selecionados
var list = document.getElementsByClassName("selectable");
for (var i = 0; i < list.length; ++i) {
var rect = list[i].getBoundingClientRect();
if (rect.bottom > y && rect.top < y+h && rect.right > x && rect.left < x+w) {
list[i].classList.add("mark");
}
else {
list[i].classList.remove("mark");
}
}
E no onmouseup
desmarcar o que ficou marcado:
// desmarcar tudo.
// aqui você pode fazer algo diferente manter marcado
var list = document.getElementsByClassName("selectable");
for (var i = 0; i < list.length; ++i) {
list[i].classList.remove("mark");
}
Esse é o ponto em que você pode fazer algo com a seleção, como manter os itens marcados por exemplo.
É claro, a classe .mark
para que possamos ver o efeito:
.selectable.mark {
background-color: yellow;
}
Mais uma vez: JSFiddle.
Agora talvez não queiramos que a página inteira seja uma área de seleção, mas limitar tudo isso a um único elemento. Vamos definir um contêiner:
<div id="container">
<div id="selection"></div>
<div class="selectable">A</div>
<div class="selectable">B</div>
<div class="selectable">C</div>
<div class="selectable">D</div>
<div class="selectable">E</div>
<div class="selectable">F</div>
<div class="selectable">G</div>
<div class="selectable">H</div>
</div>
#container {
margin: 40px;
padding: 10px;
border-style: solid;
}
Para isso funcionar vamos usar novamente o getBoundingClientRect()
e pegar um retângulo limite.
var limit = document.getElementById("container").getBoundingClientRect();
Em primeiro lugar, adicionar ao começo da onmousedown
para que nada aconteça se o clique foi fora do limite:
// se o clique foi fora do limite, não continuar
if (e.clientX > limit.right || e.clientX < limit.left ||
e.clientY > limit.bottom || e.clientY < limit.top) {
return;
}
Como última modificação, fazer com que o segundo vértice da seleção (aquele que é móvel e segue o cursor) nunca deixe o limite. No onmousemove
:
var cx = Math.max(Math.min(e.clientX, limit.right), limit.left);
var cy = Math.max(Math.min(e.clientY, limit.bottom), limit.top);
O resultado até aqui: JSFiddle.
O problema até aqui é que você por itens suficientes para causar um overflow e crie scroll, ele não será levado em conta e a seleção acontecerá na posição errada.
Isso acontece por que a posição do mouse é retornada em relação à tela e não ao ponto 0,0 da página. Também o getBoundingClientRect()
se refere à tela. Sendo assim não precisamos mexer na checagem do onmousedown
, mas precisamos setar valores corretos no beginX/Y
. Então:
beginX = e.clientX + document.body.scrollLeft;
beginY = e.clientY + document.body.scrollTop;
Já no onmousemove
temos algumas mudanças a fazer. Primeiro criar variáveis para a posição real do mouse, referente ao body
e não à tela:
var sx = document.body.scrollLeft;
var sy = document.body.scrollTop;
var mx = e.clientX + sx;
var my = e.clientY + sy;
E usar essas variáveis no calculo do vértice:
var cx = Math.max(Math.min(mx, limit.right), limit.left);
var cy = Math.max(Math.min(my, limit.bottom), limit.top);
Agora x,y,w,h
estarão corretos, mas a comparação que checa quais itens estão selecionados vai falhar pois getBoundingClientRect()
ainda se refere à tela. Basta corrigir as medidas na condicional:
var rect = list[i].getBoundingClientRect();
if (rect.bottom+sy > y && rect.top+sy < y+h && rect.right+sx > x && rect.left+sx < x+w) {
list[i].classList.add("mark");
}
else {
list[i].classList.remove("mark");
}
O resultado final: JSFiddle.
onmousemove
para cada div "selecionável". A ideia base é essa.
10/02/2014 às 1:46
Peguei a resposta do @Guilherme Bernal (mais precisamente o exemplo de selecionar div's) e incrementei para que elas permaneçam selecionadas no evento mouseup.
Exemplo: JsFiddle
As mudanças foram:
window.onmousedown = function (e) {
[...]
selecteds = [];
};
window.onmousemove = function (e) {
[if->for]
var rect = list[i].getBoundingClientRect();
if (rect.bottom > y && rect.top < y+h &&
rect.right > x && rect.left < x+w) {
list[i].style.backgroundColor = "red";
selecteds.push(list[i]);
} else {
list[i].style.backgroundColor = "lightgreen";
}
[/if->/for]
};
window.onmouseup = function (e) {
[...]
for (var i = 0; i < list.length; ++i) {
if(selecteds.length > 0){
index = list.indexOf(i);
if (index > -1) {
array.splice(index, 1);
}
}
if(indexOf.call(selecteds, list[i])){return;}
list[i].style.backgroundColor = "lightgreen";
}
};