<script language="javascript">
<!--ELEMENTOS MODIFICABLES POR USUARIO-->
var etiq='P1'; //Nombre de la pregunta
<!--Configurar el elemento que podemos mover-->
var element_ample=85; //Ancho
var element_alt=80; //Alto
var element_color='#00638A'; //Color de fondo
var element_color_encendre='#009CC0'; //Color al que se encienden las cajas cuando estamos encima
var element_borde_color='#000000'; //Color del borde
var element_borde_style='dashed'; //Tipo de borde dashed-->discontinuo solid-->continuo...
var element_borde_grosor='0.05'; //Grosor del borde
var element_texto_color='#FFFFFF'; //Color de la letra
var element_texto_tamano=12; //Tamaño de la letra
<!--Configurar la caja de origen de los elementos movibles-->
var origen_color='#EFEFEF' //Color de fondo
var origen_borde_color='#000000'; //Color del borde
var origen_borde_style='solid'; //Tipo de borde dashed-->discontinuo solid-->continuo...
var origen_borde_grosor='0.05'; //Grosor del borde
var origen_top=230; //Posicion absoluta de la caja de origen respecto la parte superior
var origen_left=312; //Posicion absoluta de la caja de origen respecto la izquierda
<!--Configurar la caja de destino de los elementos movibles-->
var receptor_color='#EEEEEE'; //Color de fondo!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var receptor_color_encendre='#CCCCCC'; //Color que s'encen quan passes per sobre arrosegant un element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var receptor_borde_color='#AAAAAA'; //Color del borde
var receptor_borde_style='dashed'; //Tipo de borde dashed-->discontinuo solid-->continuo...
var receptor_borde_grosor='0.05'; //Grosor del borde
<!--Configurar la caja principal que contiene todo-->
var container_alt=400; //Alt total
var container_ample=750; //Ample total
var container_border_color='#333333'; //Color de borde
var container_border_style='solid'; //Tipo de borde dashed-->discontinuo solid-->continuo...
var container_border_grosor='0.2'; //Grosor del borde
<!--Confiurar la letra que usamos en las columnas-->
var texto_tamano=15; //Tamany de la lletra
var texto_color_fondo='#5695AC'; //Color de fondo del texto
var texto_color='#FFFFFF'; //Color de la letra
<!--Confiurar la letra que usamos en el enunciado-->
var enunciado_tamano=18; //Tamany de la lletra
var enunciado_color='#00638A'; //Color de fondo del texto
<!--Configurar caja que contiene destino y texto columnas-->
var columna_margen_superior=5; //Margen superior
var columna_margen_inferior=10; //Margen inferior
var columna_margen_izquierdo=15; //Margen izquierdo
var columna_margen_derecho=10; //Margen Derecho
</script>
<!--Estilos-->
<style type="text/css">
.receptor {
background-color:#EEEEEE; //Color de fondo del elemento de destino de las filas
}
.columna{
float: left;
}
.droping{
background-color: #CCCCCC; //Color con el que se ilumina los receptores cuando pasamos por encima
}
</style>
<!--FIN DE ELEMENTOS MODIFICABLES POR USUARIO-->
<!-- Contenedor principal -->
<div style="text-align:center">
<div id='container' class='container'></div>
</div>
<!-- Librerias-->
<script src='prototype1.6.js' type='text/javascript'></script>
<script src='http://sm2.netquest.es/ficheros/script/src1_8/scriptaculous.js?load=effects,dragdrop' type='text/javascript'></script>
<!--Script principal-->
<script language="javascript" type="text/javascript">
<!--Llegir files-col i ocultar-->
var field=document.survey['RespMatrizSR'+etiq+'.1Fila1'][0];
i=1;
while(field!=undefined){
i++;
var field=document.survey['RespMatrizSR'+etiq+'.'+i+'Fila'+i];
}
var files=i-1;
var field=document.survey['RespMatrizSR'+etiq+'.1Fila1'];
j=0;
while(field!=undefined){
j++;
var field=document.survey['RespMatrizSR'+etiq+'.1Fila1'][j];
}
var col=j;
var current=document.survey['RespMatrizSR'+etiq+'.1Fila1'][0];
var texto = '';
for(i=1; i<=files; i++){
texto = texto + '<input type="hidden" name="RespMatrizSR'+etiq+'.'+i+'Fila'+i+'">';
}
//Hem d'agafar el textos
//Agafem el enunciat de la pregunta
var texto_preg=$(document.survey['RespMatrizSR'+etiq+'.1Fila1'][0]).up('TABLE').down('TD',1).innerHTML;
var num_preg=$(document.survey['RespMatrizSR'+etiq+'.1Fila1'][0]).up('TABLE').down('TD',0).innerHTML;
var texto_preg=num_preg+texto_preg;
//Agafem els textos de les columnes i els guardem en un vector
var texto_col=new Array(col);
for(i=1; i<=col; i++){
texto_col[i-1]=$(document.survey['RespMatrizSR'+etiq+'.1Fila1'][0]).up('TABLE').down('TD',3+i).innerHTML;
}
//Llegim els textos de les files i els guardem en un vector
var texto_files=new Array(files);
for(i=1; i<=files; i++){
texto_files[i-1]=$(document.survey['RespMatrizSR'+etiq+'.'+i+'Fila'+i][0]).up('TR').down(2).innerHTML;
}
//Ocultem la pregunta
$(document.survey['RespMatrizSR'+etiq+'.1Fila1'][0]).up('TABLE').update(texto);
<!--Drag&drop-->
//S'han de crear les caixes que corresponen a les columnes amb els seus textos
var texto_insertar='<div class="enunciado" id="enunciado" align="left">'+texto_preg+'</div><div class="destino" id=destino>';
for(i=1; i<=col; i++){
texto_insertar=texto_insertar+'<div class="columna" id=columna> <div id=texto_receptor'+i+' class="texto_receptor">'+texto_col[i-1]+'</div><div id=receptor'+i+' class="receptor" ></div></div>';
}
texto_insertar=texto_insertar+'</div><div class="origen" id="origen" align="center"></div>';
document.getElementById('container').innerHTML=tex to_insertar;
//S'han d'insertar els textos de les files
files_insertar='';
for(i=1; i<=files; i++){
files_insertar=files_insertar+'<div class="element" id=element'+i+' style="position:absolute; top=5.5px; left=7.5px; z-index:1000">'+texto_files[i-1]+'</div>';
}
document.getElementById('origen').innerHTML=files_ insertar;
<!--Parametres modificables(aspecte)-->
$('container').style.width=container_ample+'px';
$('container').style.height=container_alt+'px';
$('container').style.position='relative';
$('container').style.borderColor=container_border_ color;
$('container').style.borderStyle=container_border_ style;
$('container').style.borderWidth=container_border_ grosor+'em';
$('destino').style.position='relative';
$('destino').style.width='94%';
$('destino').style.top='3%';
$('destino').style.left='3%';
$('enunciado').style.fontSize=enunciado_tamano+'px ';
$('enunciado').style.color=enunciado_color;
var origen=$$('div.origen');
var element=$$('div.element');
var receptor=$$('div.receptor');
var texto=$$('div.texto_receptor');
var columna=$$('div.columna');
element.each( function(item) {
item.style.width=element_ample+'px';
item.style.height=element_alt+'px';
item.style.backgroundColor=element_color;
item.style.borderColor=element_borde_color;
item.style.borderStyle=element_borde_style;
item.style.borderWidth=element_borde_grosor+'em';
item.style.position='absolute';
item.style.color=element_texto_color;
item.style.fontSize=element_texto_tamano+'px';
item.style.cursor='move';
});
origen.each( function(item) {
item.style.width=(element_ample+16)+'px';
item.style.height=(element_alt+12)+'px';
item.style.backgroundColor=origen_color;
item.style.borderColor=origen_borde_color;
item.style.borderStyle=origen_borde_style;
item.style.borderWidth=origen_borde_grosor+'em';
item.style.position='absolute';
item.style.top=origen_top+'px';
item.style.left=origen_left+'px';
});
receptor.each( function(item) {
item.style.width=(element_ample+16)+'px';
item.style.height=(element_alt+12)+'px';
item.style.position='relative';
item.style.borderColor=receptor_borde_color;
item.style.borderStyle=receptor_borde_style;
item.style.borderWidth=receptor_borde_grosor+'em';
item.style.top='5px';
item.style.left='0px';
});
texto.each( function(item) {
item.style.width=(element_ample+16)+'px';
item.style.fontSize=texto_tamano+'px';
item.style.backgroundColor=texto_color_fondo;
item.style.color=texto_color;
item.style.fontFamily="Trebuchet MS, Verdana, Times New Roman, Arial";
});
columna.each( function(item) {
item.style.width=(element_ample+20)+'px';
item.style.display='block';
item.style.position='relative';
item.style.marginRigth=columna_margen_derecho+'px' ;
item.style.marginTop=columna_margen_superior+'px';
item.style.marginBottom=columna_margen_inferior+'p x';
item.style.marginLeft=columna_margen_izquierdo+'px ';
});
<!--Definicio de tipus de caixes-->
//Definim els elements que es poden moure
for(i=1; i<=files;i++){
new Draggable('element'+i, {revert:true});
}
//Definim les caixes de desti com a drop
for(i=1; i<=col;i++){
Droppables.add('receptor'+i, {accept: 'element', hoverclass:'droping', onDrop:
function(element, droppableElement){
$(droppableElement).appendChild(element);
$(element).style.position="absolute";
$(element).style.left="7.5px";
$(element).style.top="5.5px";
}});
}
//Definim com a droppable la caixa de origen per si volem retrocedir.
Droppables.add('origen', {accept: 'element', onDrop:function(element, droppableElement){
$(droppableElement).appendChild(element);
$(element).style.position="absolute";
$(element).style.top="7.5px";
$(element).style.left="5.5px";
}});
<!--Funcions per iluminar -->
function encendre(){this.style.background=element_color_enc endre;}
function apagar(){this.style.background=element_color;}
//Iluminem els elements quan estem a sobre
for(i=1;i<=files;i++){
document.getElementById('element'+i).onmousemove=e ncendre;
document.getElementById('element'+i).onmouseout=ap agar;
document.getElementById('element'+i).onmouseup=apa gar;
}
</script>