Seleção de itens
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>Discussão (2)
Carregando comentários...