elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Rompecabezas de Bitcoin, Medio millón USD en premios


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Aporte] Arrastrar y Soltar
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Aporte] Arrastrar y Soltar  (Leído 2,569 veces)
AFelipeTrujillo

Desconectado Desconectado

Mensajes: 160



Ver Perfil WWW
[Aporte] Arrastrar y Soltar
« en: 23 Junio 2010, 09:03 am »

Hola a todos les dejo este pequeño code bastante atractivo a la hora de implementar, algo al estilo wordpress

Código
  1.  <head>
  2.     <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  3.     <script src="drag.js" language="JavaScript1.5"></script>
  4.     <!-- LLAMAMOS LAS LIBRERIAS NECESARIAS PARA LA IMPLEMENTACION -->
  5.     <script>
  6.      window.onload=function(){
  7.        //VALIDAMOS QUE TRAMADO ESTE COMPLETO
  8.        REDIPS.drag.init();
  9.        //INICIALIZAMOS EL "OBJETO"
  10.        REDIPS.drag.hover_color='#CEEF9C';
  11.        // SELECCIONAMOS EL COLOR PARA EL HOVER
  12.        REDIPS.drag.drop_option = 'single';
  13.        //VALIDAMOS PARA QUE EN CADA CELDA SOLO haya UN ITEM LA OTRA OPCION
  14.        //ES SWITCH
  15.  
  16.        //MANEJO DE EVENTOS
  17.        var x = document.getElementById("evento");
  18.        REDIPS.drag.myhandler_clicked=function(){
  19.          x.innerHTML="Click sobre el elemnto";
  20.        }
  21.        REDIPS.drag.myhandler_moved=function(){
  22.           x.innerHTML="Estoy moviendo el elemento";
  23.        }
  24.        REDIPS.drag.myhandler_dropped=function(){
  25.           x.innerHTML="Elemento movido";
  26.        }
  27.      }
  28.     </script>
  29.     <title>:: Drag and Drop ::</title>
  30.  </head>
  31.  
  32.  <body>
  33.    <div id="drag">
  34.        <table width="0" border="0" cellspacing="0" cellpadding="0">
  35.        <colgroup><col width="400"/></colgroup>
  36.          <tr>
  37.            <td width="311" scope="col"><div id="link1" class="drag t1"><center>A</center></div></td>
  38.            <!-- APLICAMOS LA CLASE -->
  39.            <td width="311" scope="col" rowspan="3"></td>
  40.          </tr>
  41.          <tr>
  42.            <td scope="row"><div id="link1" class="drag t1"><center>B</center></div></td>
  43.          </tr>
  44.          <tr>
  45.            <td scope="row">&nbsp;</td>
  46.          </tr>
  47.          <tr>
  48.            <td scope="row">&nbsp;</td>
  49.            <td width="317" scope="row"><div id="link1" class="drag t1"><center>C</center></div></td>
  50.          </tr>
  51.        </table>
  52.        <div id="evento"></div>
  53.      </div>
  54.  </body>
  55. </html>
  56.  

FUENTE

VER EJEMPLO FUNCIONANDO

Salu2


En línea

Debci
Wiki

Desconectado Desconectado

Mensajes: 2.021


Actualizate o muere!


Ver Perfil WWW
Re: [Aporte] Arrastrar y Soltar
« Respuesta #1 en: 23 Junio 2010, 11:02 am »

Me ha gustado mucho, y muy bien el diseño todo muy Light xD
Por cierto el script js que incluyes donde esta? porque he visto uno definido in-code y otro que llama a un archivo :S

Saludos


En línea

AFelipeTrujillo

Desconectado Desconectado

Mensajes: 160



Ver Perfil WWW
Re: [Aporte] Arrastrar y Soltar
« Respuesta #2 en: 23 Junio 2010, 20:31 pm »

hummm el que incluyo tiene la clase y las funciones y el que esta en el código son los eventos
En línea

Debci
Wiki

Desconectado Desconectado

Mensajes: 2.021


Actualizate o muere!


Ver Perfil WWW
Re: [Aporte] Arrastrar y Soltar
« Respuesta #3 en: 24 Junio 2010, 16:01 pm »

hummm el que incluyo tiene la clase y las funciones y el que esta en el código son los eventos
Y de donde saco la susodicha drag.js?

Saludos y gracias
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines