Experimento JS..Arrastrando capas sobre campos Select

[pinchoso]

Hola a tod@s,

En el curro me pidieron que generara una especie de listado de tareas que se pudiera arrastrar sobre un formulario dividio por horas...bueno, si veis el ejemplo os haréis una idea más aproximada de lo que quiero! : http://www.label-grup.com/raimon/arrastra.htm

Como podéis ver, el funcionamiento de la página es correcto, aunque existe un problema en IE (en FireFox funciona bien) el texto de las capas que podemos arrastrar aparece por detrás de los campos select, y eso no me mola na!

¿¿Alguien sabría decirme como hacer para que no ocurra esto (que funcione como en FireFox, que es como debería)??

A parte, estoy seguro que el código jscript se puede mejorar, así que estoy abierto a todo tipo de sugerencias y opinones...que para eso está el foro!

Bueno, un saludo y gracias de antemano!

pinchoso!

[pinchoso]

Versión mejorada! Ahora con posibilidad de añadir distitnas tareas / temas / asuntos dentro de cada select. ñe! :)
http://www.label-grup.com/raimon/arrastra_2.htm

se recomiendo ver con FireFox

[Saruman]

wao... excelente mi hermano!
por eso me gusta este foro... hay gente super COOL!!

[el_javi]

Buenas tardes a todos.

Pinchoso, este comentario va dirigido a ti...

Me parece fenomenal la implementación que has hecho (o han hecho.. no se si lo desarrollaste tú o no.. y no lo pongo en duda para nada).

Lo que me escamó, es el comentario de recomendar verlo en Firefox... y lo entendí.

No está solucionado el problema de las Capas sobre SELECT, en Internet Explorer.

Por ello, y para que termines de "maquear" tu script, te recomiendo que visites este post que puse yo mismo en el foro, la semana pasada.

http://www.forosdelweb.com/f13/importante-solucionado-formularios-capas-340508/

Ante cualquier duda no tengas problema en preguntarme.

Un saludo.

[pinchoso]

Pues le echaré un vistazo, a ver como me las ingenio para arrastrar al mismo tiempo el IFrame y la capa...todo es ponerse...tu idea me parece genial y nunca habia caído en que se podia hacer!!

hasta pronto!

[el_javi]

Mira el post que puse...

Os lo he dejado preparado para que no tengais que pensar nada, mas que en darle un diseño al TOOLTIP.

Que el IFRAME siga al Tooltip. ya está programado

Pa que veas, como pensamos en los demas

Saludos

[pinchoso]

Por cierto, gracias Saruman! Por lo de Cool!! jjaaj

[pinchoso]

Bueno, pues aqui estoy otra vez. Gracias al post de el_javi he solucionado el problema de mostrar la capa por encima del select i ahí está.
Muchas gracias el_javi ....

Bueno, creo que aún hay cosas que mejorar, intentaré hacerlo cuando tenga tiempo para ello...os dejo el link, otra vez y esta incluyo el código definitivo con la parte aportada por el_javi. (como vereis la única que esta comentada, yo tengo el mal costumbre de no hacerlo).

En referencia al comentario de el_javi del desarrollo i tal, he de decir que evidentemente lo he desarrollado solito, aunque esta claro: google helps!

Nada más, hasta la próxima!

LINK: http://www.label-grup.com/raimon/arrastra_3.htm

[pinchoso]

Código:

<script language="javascript">
var object = null;
var objectID = null;
var cX = 0;
var cY = 0; 
var originX = 0;
var originY = 0; 
var list = 'noList';
var valor = 0;
var micapa = null;
var indiceselec = null;
function changeVar(name,val) {
list = name
valor = val
}
function mouseClick(evt) {
evt = (evt) ? evt: ((window.event) ? event : null);
objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null);
if (objectID.indexOf('capa')!=-1) {
object = document.getElementById(objectID);
}
 
if (object) { 
originX = object.offsetLeft;
originY = object.offsetTop;
cX = evt.clientX - object.offsetLeft;
cY = evt.clientY - object.offsetTop;
return false;
}
 
object = null;
return;
}
function mouseDrag(evt) {
evt = (evt) ? evt : ((window.event)? event : null);
 
if (object) {
var obj_iframe_oculto = document.getElementById("iframe_oculto");
object.style.left = evt.clientX - cX + 'px';
object.style.top = evt.clientY - cY + 'px';
object.style.filter="alpha(opacity=85)"; // Opacidad para IE
object.style.opacity="0.85"; // Ocapacidad para Netscape
// Quitamos al Iframe TODA la opacidad para que sea totalmente transparente y se vea el fondo
obj_iframe_oculto.style.filter="alpha(opacity=0)"; // Opacidad para IE
obj_iframe_oculto.style.opacity="0.00"; // Ocapacidad para Netscape
// Hacemos que la capa sea totalmente visible
object.style.display = "block";
// Definimos el ancho del IFRAME igual que el ancho de la capa, para que no se le vea
obj_iframe_oculto.style.width = object.offsetWidth;
obj_iframe_oculto.style.height = object.offsetHeight;
// Posicionamos el IFRAME en la misma posición que la capa (para que esté siempre detras)
obj_iframe_oculto.style.top = object.style.top;
obj_iframe_oculto.style.left = object.style.left;
// Definimos que el contenido del IFRAME esté VISIBLE
obj_iframe_oculto.style.display = "block"; // ESTA ES LA LINEA MAS IMPORTANTE
return false;
}
}
function mouseRelease(evt) {
obj_iframe_oculto = document.getElementById("iframe_oculto");
obj_iframe_oculto.style.top = 0
obj_iframe_oculto.style.left = 0
if (object) {
evt = (evt) ? evt : ((window.event)? event : null);
 
selectEl = document.getElementById(list);
if (selectEl!='') {
 
if (list!='noList') {
if (selectEl.options.length<1) {
selectEl.options[selectEl.options.length] 
= new Option('Seleccione para eliminar una opcion' , objectID.split('_'));
 
selectEl.options[selectEl.options.length] 
= new Option(object.innerHTML , objectID.split('_'));
formulario['ListHid'+valor].value = objectID
//object.style.display = 'none';
}
else {
selectEl.options[selectEl.options.length] 
= new Option(object.innerHTML , objectID.split('_'));
if (formulario['ListHid'+valor].value==",") {
formulario['ListHid'+valor].value="";
} 
if (formulario['ListHid'+valor].value!="") { 
michar = formulario['ListHid'+valor].value
var t=michar.length;
n=1
var last = michar.substring(t-1, t);
if(n>michar.length) {
n=michar.length;
}
var first = michar.substring(0, n);
var largo = (michar.length)
 
if (last==",") {
if (first == ",") {
var valcamp = formulario['ListHid'+valor].value
var valcampL = valcamp.length
valcamp = valcamp.substring(1,valcampL)
valcampL = valcamp.length
valcamp = valcamp.substring(0,valcampL-1)
formulario['ListHid'+valor].value = valcamp + ',' + objectID
}
else {
formulario['ListHid'+valor].value = formulario['ListHid'+valor].value + objectID
}
}
if (last!=",") {
if (first == ",") {
valcamp = formulario['ListHid'+valor].value
valcampL = valcamp.length
valcamp = valcamp.substring(1,valcampL)
formulario['ListHid'+valor].value =valcamp + ',' + objectID
}
else {
formulario['ListHid'+valor].value = formulario['ListHid'+valor].value + ',' + objectID
}
}
}
else {
formulario['ListHid'+valor].value = objectID
}
valcamp = formulario['ListHid'+valor].value
valcamp = valcamp.replace (",,",",");
formulario['ListHid'+valor].value = valcamp
}
}
}
else {
object=null;
vuelve();
}
vuelve()
} 
else {
object.style.left = originX + 'px';
object.style.top = originY + 'px';
} 
object = null;
return false;
}
function changeHid(name,cual,arr) {
indiceselec = formulario['selectList'+cual].selectedIndex
indiceselec = parseInt(indiceselec) - 1
capas = formulario[name].value
var myarray = new Array();
miarray = capas.split(",")
micapa = miarray[indiceselec]
formulario[arr].value = micapa
}
function deletes(selected, cual) {
capa = micapa
eval(capa).style.display = "";
var indice = formulario['selectList'+cual].selectedIndex 
formulario['selectList'+cual].options[indice] = null;
miarray[indice-1] = null;
formulario['ListArr'+cual].value="";
if (eval(miarray.length)>1) {
formulario['ListHid'+cual].value=miarray;
}
else { 
formulario['ListHid'+cual].value="";
}
valorc = formulario['ListHid'+cual].value
valorc = valorc.replace (",,",",");
formulario['ListHid'+cual].value = valorc
if (formulario['selectList'+cual].length == 1) {
formulario['selectList'+cual].options[0] = null;
}
}
window.onerror = miControl;
function miControl()
{
return true
} 
function vuelve() {
object.style.left = originX + 'px';
object.style.top = originY + 'px';
object=null;
return false
}
</script>

[pinchoso]

Código:

<style type="text/css">
.moveable {
cursor:move;
color: black;
position: absolute;
z-index:100;
left: 400px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.opaco {
filter: alpha(opacity=50);
opacity: .5
height;
background-color: #E0E0E0;
: 30px;
width: 300px;
cursor: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
border: 1px none;
} 
#formarea {
position:absolute;
top:5px;
left:5px;
z-index:1;
width: 360px;
height: 265px;
}
.selects {
margin:0;
border:2px dashed red;
font:11px Arial;
color:#333333;
background:#e2e2e2;
width:259px;
height:60px;
padding:2px 3px;
}
.tds {
border: 1px none #CCCCCC;
background-position: center center;
}
.txt {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.tds2 {
background-position: center center;
border-top: 1px dotted #999999;
border-right: 1px none #999999;
border-bottom: 1px none #999999;
border-left: 1px none #999999;
}
.bots {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
border: 1px none;
color: #FFFFFF;
background-color: #C4C8FF;
}
</style>
<body onLoad="document.onmousedown = mouseClick;document.onmousemove = mouseDrag;document.onmouseup = mouseRelease;">
<div id="capa_1" class="moveable" >TEMA 1</div>
<br>
<div id="capa_2" class="moveable" >TEMA 2</div>
<br>
<div id="capa_3" class="moveable" >TEMA 3</div>
<br>
<div id="capa_4" class="moveable" >TEMA 4</div>
<br>
<div id="capa_5" class="moveable" >TEMA 5</div>
<div id="formarea" > 
<form name="formulario" method="post" action="" >
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="txt" >
<tr> 
<td width="10%" valign="middle">12:00</td>
<td width="90%" valign="bottom" class="tds" onmouseover="changeVar('selectList1','1')" > 
<select name="select" size="1" multiple class="selects" id="selectList1" onmouseover="changeVar('selectList1','1')" onChange="changeHid('ListHid1','1','ListArr1')">
</select>
<a href="#"><img src="del.gif" width="9" height="20" border="0" onClick="deletes('selectList','1')"></a> 
<input name="ListHid1" type="hidden" class="selects" > 
<input name="ListArr1" type="hidden" class="selects" > </td>
</tr>
<tr> 
<td height="20" colspan="2" valign="middle" class="tds2">&nbsp;</td>
</tr>
<tr> 
<td valign="middle">13:00</td>
<td valign="middle" class="tds" onmouseover="changeVar('selectList2','2')" > 
<select name="select2" size="10" multiple class="selects" id="selectList2" onmouseover="changeVar('selectList2','2')" onChange="changeHid('ListHid2','2','ListArr2')" >
</select>
<a href="#"><img src="del.gif" width="9" height="20" border="0" onClick="deletes('selectList2','2')"></a> 
<input name="ListHid2" type="hidden" class="selects" >
<input name="ListArr2" type="hidden" class="selects" ></td>
</tr>
<tr> 
<td height="20" colspan="2" valign="middle" class="tds2" >&nbsp;</td>
</tr>
<tr> 
<td valign="middle" >14:00</td>
<td valign="middle" class="tds" onmouseover="changeVar('selectList3','3')"> 
<select name="select3" size="10" multiple class="selects" id="selectList3" onmouseover="changeVar('selectList3','3')" onChange="changeHid('ListHid3','3','ListArr3')">
</select>
<a href="#"><img src="del.gif" width="9" height="20" border="0" onClick="deletes('selectList3','3')"></a> 
<input name="ListHid3" type="hidden" class="selects" >
<input name="ListArr3" type="hidden" class="selects" ></td>
</tr>
<tr> 
<td height="20" colspan="2" valign="middle" class="tds2">&nbsp;</td>
</tr>
<tr> 
<td valign="middle">15:00</td>
<td valign="middle" class="tds" onmouseover="changeVar('selectList4','4')"> 
<select name="select4" size="10" multiple class="selects" id="selectList4" onmouseover="changeVar('selectList4','4')" onChange="changeHid('ListHid4','4','ListArr4')">
</select>
<a href="#"><img src="del.gif" width="9" height="20" border="0" onClick="deletes('selectList4','4')"></a> 
<input name="ListHid4" type="hidden" class="selects" >
<input name="ListArr4" type="hidden" class="selects" > </td>
</tr>
<tr> 
<td height="20" colspan="2" valign="middle" class="tds2">&nbsp;</td>
</tr>
<tr> 
<td valign="middle">16:00</td>
<td valign="middle" class="tds" onmouseover="changeVar('selectList5','5')"> 
<select name="select5" size="10" multiple class="selects" id="selectList5" onmouseover="changeVar('selectList5','5')" onChange="changeHid('ListHid5','5','ListArr5')" >
</select>
<a href="#"><img src="del.gif" width="9" height="20" border="0" onClick="deletes('selectList5','5')"></a> 
<input name="ListHid5" type="hidden" class="selects" >
<input name="ListArr5" type="hidden" class="selects" ></td>
</tr>
</table>
<!--
<div id="hid" style="position:absolute; left:111px; top:305px; width:223px; height:37px; z-index:1; visibility: hidden;"> 
<select name="select6" size="10" multiple class="selects" id="noList" onmouseover="changeVar('noList','0')" >
</select>
</div>-->
<br>
</form>
</div>
<iframe id="iframe_oculto" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none; z-index: 99;"></iframe>
</body>

[el_javi]

Hola pinchoso

Me alegra que hayas podido sacarle partido a mi Script de capas sobre Select (en IE).

He visto el enlace donde lo tienes colgado, y me parece guay.

Hay que depurarlo un poco pero va muy bien encaminado.

Espero que podamos seguir ayudándonos mucho mas tiempo.

PD: La próxima vez que metas código, usa en el Editor avanzado de POST, usa los tag [ CODE ] TU CÓDIGOOOO [ /CODE ].. asi, te evitas postear tanto (cantidad de post, que has puesto 2), y evitas que haya que recorrer mucha ventana hacia abajo (generación de Scroll vertical)

Saludos!!!

[pinchoso]

Es lo que he hecho, pero no me lo cogia y decia que habia demasiado texto...