[Aporte] Arrastrar y Soltar

AFelipeTrujillo · 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 (html4strict) [Seleccionar]

<html>
  <head>
     <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
     <script src="drag.js" language="JavaScript1.5"></script>
     <!-- LLAMAMOS LAS LIBRERIAS NECESARIAS PARA LA IMPLEMENTACION -->
     <script>
      window.onload=function(){
        //VALIDAMOS QUE TRAMADO ESTE COMPLETO
        REDIPS.drag.init();
        //INICIALIZAMOS EL "OBJETO"
        REDIPS.drag.hover_color='#CEEF9C';
        // SELECCIONAMOS EL COLOR PARA EL HOVER
        REDIPS.drag.drop_option = 'single';
        //VALIDAMOS PARA QUE EN CADA CELDA SOLO haya UN ITEM LA OTRA OPCION
        //ES SWITCH

        //MANEJO DE EVENTOS
        var x = document.getElementById("evento");
        REDIPS.drag.myhandler_clicked=function(){
          x.innerHTML="Click sobre el elemnto";
        }
        REDIPS.drag.myhandler_moved=function(){
           x.innerHTML="Estoy moviendo el elemento";
        }
        REDIPS.drag.myhandler_dropped=function(){
           x.innerHTML="Elemento movido";
        }
      }
     </script>
     <title>:: Drag and Drop ::</title>
  </head>

  <body>
    <div id="drag">
        <table width="0" border="0" cellspacing="0" cellpadding="0">
        <colgroup><col width="400"/></colgroup>
          <tr>
            <td width="311" scope="col"><div id="link1" class="drag t1"><center>A</center></div></td>
            <!-- APLICAMOS LA CLASE -->
            <td width="311" scope="col" rowspan="3"></td>
          </tr>
          <tr>
            <td scope="row"><div id="link1" class="drag t1"><center>B</center></div></td>
          </tr>
          <tr>
            <td scope="row">&nbsp;</td>
          </tr>
          <tr>
            <td scope="row">&nbsp;</td>
            <td width="317" scope="row"><div id="link1" class="drag t1"><center>C</center></div></td>
          </tr>
        </table>
        <div id="evento"></div>
      </div>
  </body>
</html>

FUENTE

VER EJEMPLO FUNCIONANDO

Salu2

Debci · 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

AFelipeTrujillo · 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

Debci · 24 Junio 2010, 16:01 PM

Cita de: 4ng3r 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

Y de donde saco la susodicha drag.js?

Saludos y gracias

Test Foro de elhacker.net SMF 2.1

[Aporte] Arrastrar y Soltar

AFelipeTrujillo

Debci

AFelipeTrujillo

Debci