Foros del Web » Programando para Internet » Javascript »

Drag and Drop (Arrastrar y soltar)

Estas en el tema de Drag and Drop (Arrastrar y soltar) en el foro de Javascript en Foros del Web. Me han sugerido publique aquí mi requerimiento. He adaptado una rutina que se ajusta a lo que requiero, a mi parecer muy buena. Puede verse, ...
  #1 (permalink)  
Antiguo 08/06/2012, 17:49
 
Fecha de Ingreso: enero-2002
Mensajes: 1.173
Antigüedad: 21 años
Puntos: 21
Drag and Drop (Arrastrar y soltar)

Me han sugerido publique aquí mi requerimiento.

He adaptado una rutina que se ajusta a lo que requiero, a mi parecer muy buena.
Puede verse, solo arrastran un recuadro y lo acomodan al lugar indicado: http://www.formatoweb.com.ar/blog/files/dragdrop2.php

Requiero al final tomar las posiciones finales asignadas, con un form y luego con un GET o POST.
Si pueden darme una idea la agradeceré infinitamente.
Gracias por las ideas que me puedan proporcionar.

El código es:

Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2.      
  3.     <!--
  4.    Este material es de libre utilización y modificación bajo la siguiente licencia:
  5.    http://creativecommons.org/licenses/by-nc-sa/2.5/
  6.    Puedes distribuir estos scripts o colocarlos en tu Sitio siempre y cuando no elimines estos
  7.    comentarios y la licencia expuesta sea respetada.
  8.    
  9.    Mas ejemplos y material sobre AJAX en: http://www.formatoweb.com.ar/ajax
  10.    Cualquier sugerencia, crítica o comentario son bienvenidos.
  11.    Contacto: [email protected]
  12.    -->
  13.     <html>
  14.     <head>
  15.     <script type="text/javascript">
  16.     // Variables globales
  17.     var indiceZ=0;
  18.     var posElInicial=new Array();
  19.     var posElFinal=new Array();
  20.     var posEls=new Array();
  21.     var posMouseInicial=new Array();
  22.     var elEnMov=null;
  23.      
  24.     // Cargo las posiciones de las capas en el documento
  25.     onload=posElsAbs;
  26.     onresize=posElsAbs;
  27.      
  28.     // Detecto el navegadoregador
  29.     if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0; // IE
  30.     else navegador=1; // Otros
  31.      
  32.     function delay()
  33.     {
  34.         /*
  35.         En IE sin un pequeño delay parece haber problemas con la captura de las posiciones de las capas. Lo extraño es que no siempre sucede por lo que este
  36.         retraso puede no ser necesario.
  37.         */
  38.     }
  39.      
  40.     function posElsAbs()
  41.     {
  42.         /*
  43.         funcion: almacenar las posiciones absolutas de los elementos movibles de la pagina
  44.         parametros:
  45.         retorno:
  46.         */
  47.         setTimeout("delay()", 200);
  48.         var el=document.getElementsByTagName("div");
  49.         var i=0;
  50.         while(el[i])
  51.         {
  52.             if(el[i].id.substr(0, 4)=="drag")
  53.             {
  54.                 el[i].onmousedown=inicioMov;
  55.                 posEls[el[i].id]=posElAbs(el[i].id);
  56.             }
  57.             i++;
  58.         }
  59.     }
  60.      
  61.     function noEventos(event)
  62.     {
  63.         if(navegador==0)
  64.         {
  65.             window.event.cancelBubble=true;
  66.             window.event.returnValue=false;
  67.         }
  68.         if(navegador==1) event.preventDefault();
  69.     }
  70.      
  71.     function getEl(idEl)
  72.     {
  73.         /*
  74.         funcion: devolver el elemento cuyo id se recibe
  75.         parametros: (string) id de elemento
  76.         retorno: (objeto) elemento cuyo id se recibe
  77.         */
  78.         return document.getElementById(idEl);
  79.     }
  80.      
  81.     function copiaArr(arr)
  82.     {
  83.         /*
  84.         funcion: devolver una copia exacta del array que se recibe por parametro
  85.         parametros: (array) array a copiar
  86.         retorno: (array) duplicado del array recibido
  87.         */
  88.         var tArr=new Array();
  89.         for(var n in arr) tArr[n]=arr[n];
  90.         return tArr;
  91.     }
  92.      
  93.     function posMouse(event)
  94.     {
  95.         /*
  96.         funcion: devolver la posicion del puntero en un momento determinado
  97.         parametros: (objeto) objeto event
  98.         retorno: (array=>["x"] - ["y"]) posicion del puntero
  99.         */
  100.         var pos=new Array();
  101.         if(navegador==0)
  102.         {
  103.             /* document.body.clientLeft/clientTop es el tamaño del borde (usualmente 2px) que
  104.             encierra al documento ya que en IE este no empieza en (0,0) */
  105.             pos["x"]=window.event.clientX+document.body.clientLeft+document.body.scrollLeft;
  106.             pos["y"]=window.event.clientY+document.body.clientTop+document.body.scrollTop;
  107.         }
  108.         if(navegador==1)
  109.         {
  110.             pos["x"]=event.clientX+window.pageXOffset;
  111.             pos["y"]=event.clientY+window.pageYOffset;
  112.         }
  113.         return pos;
  114.     }
  115.      
  116.     function posElAbs(idEl)
  117.     {
  118.         /*
  119.         funcion: devolver la posicion del elemento con respecto a los bordes del documento
  120.         parametros: (string) id del elemento
  121.         retorno: (array=>["xInicial"] - ["xFinal"] - ["yInicial"] - ["yFinal"]) posicion del elemento
  122.         */
  123.         var el=elP=getEl(idEl);
  124.         var pos=new Array();
  125.         pos["xInicial"]=pos["yInicial"]=pos["xFinal"]=pos["yFinal"]=0;
  126.        
  127.         do
  128.         {
  129.             pos["xInicial"]+=elP.offsetLeft;
  130.             pos["yInicial"]+=elP.offsetTop;
  131.             elP=elP.offsetParent;
  132.         } while(elP);
  133.      
  134.         pos["xFinal"]=el.offsetWidth+pos["xInicial"];
  135.         pos["yFinal"]=el.offsetHeight+pos["yInicial"];
  136.      
  137.         return pos;
  138.     }
  139.      
  140.     function posElRel(idEl)
  141.     {
  142.         /*
  143.         funcion: devolver la posicion del elemento con respecto a su contenedor (left y top)
  144.         parametros: (string) id del elemento
  145.         retorno: (array=>["x"] - ["y"]) posicion del elemento
  146.         */
  147.         var el=getEl(idEl);
  148.         var pos=new Array();
  149.         pos["x"]=parseInt(el.style.left);
  150.         pos["y"]=parseInt(el.style.top);
  151.         return pos;
  152.     }
  153.      
  154.     function reOrdena(posMouse)
  155.     {
  156.         for(var idEl in posEls)
  157.         {
  158.             if(idEl!=elEnMov.id)
  159.             {
  160.                 if(posMouse["x"]>=posEls[idEl]["xInicial"] && posMouse["x"]<=posEls[idEl]["xFinal"] &&
  161.                posMouse["y"]>=posEls[idEl]["yInicial"] && posMouse["y"]<=posEls[idEl]["yFinal"])
  162.                {
  163.                    // La capa cuyo id es idEl debe posicionarse en la posicion de comienzo de la capa en movimiento
  164.                    var el=getEl(idEl);
  165.                    
  166.                     // Intercambio la posicion de la capa estatica por la posicion final de la capa en movimiento
  167.                     var temp=new Array();
  168.                     temp["x"]=parseInt(el.style.left);
  169.                     temp["y"]=parseInt(el.style.top);
  170.                     el.style.left=posElFinal["x"]+"px";
  171.                     el.style.top=posElFinal["y"]+"px";
  172.                     posElFinal=copiaArr(temp);
  173.                    
  174.                     // Cambio los valores de posicion de la capa estatica y la capa en movimiento en el array de posiciones
  175.                     var temp1=new Array();
  176.      
  177.                     temp1=copiaArr(posEls[elEnMov.id]);
  178.                     posEls[elEnMov.id]=copiaArr(posEls[idEl]);
  179.                     posEls[idEl]=copiaArr(temp1);
  180.                 }
  181.             }
  182.         }
  183.     }
  184.      
  185.     function inicioMov(event)
  186.     {
  187.         if(navegador==0)
  188.         {
  189.             elEnMov=window.event.srcElement;
  190.            
  191.             document.attachEvent("onmousemove", enMov);
  192.             document.attachEvent("onmouseup", finMov);
  193.         }
  194.         if(navegador==1)
  195.         {
  196.             elEnMov=event.target;
  197.            
  198.             document.addEventListener("mousemove", enMov, true);
  199.             document.addEventListener("mouseup", finMov, true);
  200.         }
  201.        
  202.         posElInicial=posElRel(elEnMov.id);
  203.         posMouseInicial=posMouse(event);
  204.        
  205.         posElFinal=copiaArr(posElInicial);
  206.        
  207.         elEnMov.style.zIndex=++indiceZ;
  208.         noEventos(event);
  209.     }
  210.      
  211.     function enMov(event)
  212.     {    
  213.         var pos=posMouse(event);
  214.         reOrdena(pos);
  215.        
  216.         elEnMov.style.left=posElInicial["x"]+pos["x"]-posMouseInicial["x"]+"px";
  217.         elEnMov.style.top=posElInicial["y"]+pos["y"]-posMouseInicial["y"]+"px";
  218.        
  219.         noEventos(event);
  220.     }
  221.      
  222.     function finMov(event)
  223.     {
  224.         elEnMov.style.left=posElFinal["x"]+"px";
  225.         elEnMov.style.top=posElFinal["y"]+"px";
  226.        
  227.         if(navegador==0)
  228.         {    
  229.             document.detachEvent("onmousemove", enMov);
  230.             document.detachEvent("onmouseup", finMov);
  231.         }
  232.         if(navegador==1)
  233.         {
  234.             document.removeEventListener("mousemove", enMov, true);
  235.             document.removeEventListener("mouseup", finMov, true);
  236.         }
  237.     }
  238.     </script>
  239.      
  240.     <style type="text/css">
  241.     #contenedor DIV
  242.     {
  243.         height:20px;
  244.         width:150px;
  245.         position:absolute;
  246.         border-color:#000000; border-style:solid; border-width:1px;
  247.         background:#FFFFFF;
  248.         font-family:Verdana; font-size:12px;
  249.         padding-top:4px;
  250.         margin:5px;
  251.         text-align:center;
  252.         cursor:move;
  253.     }
  254.      
  255.     #contenedor
  256.     {
  257.         position:absolute;
  258.         top:50px;
  259.         left:50%;
  260.         margin-left:-75px;
  261.     }
  262.     </style>
  263.     </head>
  264.      
  265.     <body>
  266.      
  267.     <div id="contenedor">
  268.         <div id="drag_1" style="top:0px; left:0px;">1</div>
  269.         <div id="drag_2" style="top:35px; left:0px;">2</div>
  270.         <div id="drag_3" style="top:70px; left:0px;">3</div>
  271.         <div id="drag_4" style="top:105px; left:0px;">4</div>
  272.     </div>
  273.      
  274.     </body>
  275.     </html>
  #2 (permalink)  
Antiguo 08/06/2012, 19:08
 
Fecha de Ingreso: julio-2009
Ubicación: La Plata
Mensajes: 233
Antigüedad: 13 años, 7 meses
Puntos: 8
Respuesta: Drag and Drop (Arrastrar y soltar)

Sirve?
Código Javascript:
Ver original
  1. eleStr="drag_";
  2. for(i=0;i<5;i++)
  3.     {
  4.         document.getElementById("miForm"+i).value=parseInt(document.getElementById(eleStr+i))
  5.     }
Sería más cómodo con nombres en vez de IDs, a los nombres se los puede tratar como lista.
  #3 (permalink)  
Antiguo 08/06/2012, 19:39
 
Fecha de Ingreso: enero-2002
Mensajes: 1.173
Antigüedad: 21 años
Puntos: 21
Respuesta: Drag and Drop (Arrastrar y soltar)

Cita:
Iniciado por pistonasos Ver Mensaje
Sirve?
Código Javascript:
Ver original
  1. eleStr="drag_";
  2. for(i=0;i<5;i++)
  3.     {
  4.         document.getElementById("miForm"+i).value=parseInt(document.getElementById(eleStr+i))
  5.     }
Sería más cómodo con nombres en vez de IDs, a los nombres se los puede tratar como lista.
Gracias pistonasos,

Pero ¿como lo coloco? ¿En donde?
Te confieso que ando verde en JS, si me echas una ayudadita te agradeceré.
  #4 (permalink)  
Antiguo 10/06/2012, 20:51
 
Fecha de Ingreso: julio-2009
Ubicación: La Plata
Mensajes: 233
Antigüedad: 13 años, 7 meses
Puntos: 8
Respuesta: Drag and Drop (Arrastrar y soltar)

Al final de toda la página,antes de </body> y dentro de un <script type="javascript"></script>.
Eso sí, tendrías que hacer algo como:

Código HTML:
Ver original
  1.  <input id="miForm0" type="hidden"/>
  2.  <input id="miForm1" type="hidden"/>
  3.  <input id="miForm2" type="hidden"/>
  4.  <input id="miForm3" type="hidden"/>
  5.  <input id="miForm4" type="hidden"/>
  6. </form>

En el documento HTML. Salu2.

Etiquetas: ajax, arrastrar, drag, drop, funcion, html, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:37.