Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

andersonsv

Seleção de itens

Por , em Javascript

Recommended Posts

andersonsv    0

andersonsv
Postado

Olá galera,

Gostaria da ajuda de vocês para esse desafio.

Não sei por onde começar, consegui fazer um drag drop para seleção. Ele faz um div dinamico e é arrastado como se fosse uma selecao..

O problema tá no seguinte:

Preciso selecionar os itens que foram afetados pela seleção.

Tenho a tabela e gostaria de pegar o valor do item.

O pior vai ser depois o copiar e colar, mas vamos por partes!

 

Agradeço a ajuda! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

código:

 

 

<html>
<head>
	<title>Dynamic Div</title>
</head>
<style>
	.divCss{
		background:#F7F7F7;
		position:absolute;
		border:1px dashed #CCCCCC;
		opacity:0.65;
		-moz-opacity: 0.65;
		filter: alpha(opacity=65);
	}
</style>
<body>
<form>
	top ini  <input type="text" id="txtTopIni"  name="txtTopIni"  value="" size="5">
	lef ini  <input type="text" id="txtLeftIni" name="txtLeftIni" value="" size="5">
	top fim  <input type="text" id="txtTopFim"  name="txtTopFim"  value="" size="5">
	lef fim  <input type="text" id="txtLeftFim" name="txtLeftFim" value="" size="5">

</form>
	<table border=1 width=300>
		<tr>
			<td>80</td>
			<td>80</td>
			<td>80</td>
		</tr>
		<tr>
			<td>90</td>
			<td>90</td>
			<td>90</td>
		</tr>
	</table>
</body>
</html>
<script type="text/javascript">

// desabilita seleção da página
function disableSelection(target){

	if (typeof target.onselectstart!="undefined"){ //IE 
		target.onselectstart=function(){return false}
	}else if (typeof target.style.MozUserSelect!="undefined"){ //Firefox 
		target.style.MozUserSelect="none"
	}else{ //Outros (IE: Opera)
		target.onmousedown=function(){return false}
	}
	target.style.cursor = "default"

}
	
	var xIni = document.getElementById("txtLeftIni");
	var yIni = document.getElementById("txtTopIni");
	var xFim = document.getElementById("txtLeftFim");
	var yFim = document.getElementById("txtTopFim");
	
function displayCoordIni(){
	xIni.value = event.clientX;
	yIni.value = event.clientY;
	criaDiv();
}

function displayCoordFim(){
	if (event.button == 1){
		xFim.value = event.clientX;
		yFim.value = event.clientY;
		resizeDiv();
	}
}

function criaDiv(){
	var objDiv = document.getElementById("divGrid");
	if(objDiv!=null){document.forms[0].removeChild(objDiv);}
	var elem = document.createElement("div");
	elem.id = "divGrid";
	elem.className = "divCss";
	document.forms[0].appendChild(elem);
}

function resizeDiv(){

	xIni.value = parseInt(xIni.value);
	yIni.value = parseInt(yIni.value);
	xFim.value = parseInt(xFim.value);
	yFim.value = parseInt(yFim.value);

	var _t = (yFim.value - yIni.value) < 0 ? yFim.value : yIni.value; // top
	var _l = (xFim.value - xIni.value) < 0 ? xFim.value : xIni.value; // left
	var _w = Math.abs(xFim.value - xIni.value); // width
	var _h = Math.abs(yFim.value - yIni.value); // height

	document.styleSheets[0].rules[0].style.width = _w + 'px';
	document.styleSheets[0].rules[0].style.height = _h + 'px';
	document.styleSheets[0].rules[0].style.top = _t + 'px';
	document.styleSheets[0].rules[0].style.left = _l + 'px';
}

document.onmousedown = displayCoordIni 
document.onmousemove = displayCoordFim

// bloqueia a seleção da página
disableSelection(document.body); 

</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

klaygomes    0

klaygomes
Postado

andersonsv, como você avalia seu conhecimento em javascript e geometria? Dependendo do quanto você 'sabe', isso lhe dará bastante trabalho.

 

1 - Você terá que saber as cordenadas da tabela (Aonde ela esta na tela?) e o seu tamanho (largura e altura)

Com isso, calcular:

2 - Largura, altura das linhas e quantidade.

3 - Largura, altura, quantidade das colunas.

 

Faça uma salada com estes dados e brique um pouco com geometria (já reprovei nesta materia).

Compartilhar este post

Link para o post
Compartilhar em outros sites

andersonsv    0

andersonsv
Postado

é isso vai dar mto trabalho...

qto a essa informações beleza, jah imaginava que precisaria mesmo pegar o tamanho de cada celula da tabela e tudo mais...

o problema maior ta sendo... como recuperar o que está sendo afetado. Não sei comando que faça isso...

tentei o srcElement

mas ele so muda a cor da tabela no(s) item(s) em que o mouse passa e não na div de selecao...

vai ser dificil isso!!!

um grande desafio heh

mesmo assim obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito