Me he prometido a mi mismo aprender un poco más de javascript. Des de la simple vista de un pringao principante como yo, me pareció que el framework jQuery es el más potente, aunque mootols y scriptaculous (entre otros) tienen aspectos muy positivos. Pero vamos al lío... Cuelgo el tutorial de las funciones draggable y droppable. Para utilizarlo en una web comercial quizás no nos aportarán mucha ayuda, pero para según qué aplicaciones online nos puede ser util.

1.llamada a los archivos del framework jQuery. Por mi corta experiencia utilizo los archivos en los servidores de Google, aunque cada uno lo puede poner donde quiera...

2.Código HTML de la página.Simple.

    
 
    
 
    
 


    
Arrastra éstos elementos: 
    
Izquierda
    
Medio
    
Derecha

Los elementos que vamos a arrastrar son los h3 item_1, item_2 y item_3. Dónde los arrastraremos? Van a ir en sus respectivos contenedores, en caso que los arrastremos a otro contenedor que no sea el suyo no nos va a dejar y volveran a su última posición.

3.Código js. Permite hacer los efectos del framework:

$(document).ready(function() {
   $(".item_1").draggable({ revert: 'invalid' });
   $("#main_left").droppable({
    accept: '.item_1',
    activeClass: 'drop_hover',
 hoverClass: 'drop_hover',
 drop: function(event, ui) {
 $(this).addClass('drop_hover').find('p').html('Dropped!');
}
   });

   $(".item_2").draggable({ revert: 'invalid' });
   $("#main_middle").droppable({
    accept: '.item_2',
    activeClass: 'drop_hover',
 hoverClass: 'drop_hover',
 drop: function(event, ui) {
 $(this).addClass('drop_hover').find('p').html('Dropped!');
}
   });

   $(".item_3").draggable({ revert: 'invalid' });
   $("#main_right").droppable({
    accept: '.item_3',
    activeClass: 'drop_hover',
 hoverClass: 'drop_hover',
 drop: function(event, ui) {
 $(this).addClass('drop_hover').find('p').html('Dropped!');
}
   });
});

4.Código css. Es muy corto, pero creo que facilita muy bien la visibilidad de los efectos.

@charset "utf-8";
/* CSS Document */
body {
font-family: Verdana, Arial;
font-size: 12px;
color: #666;
width: 100%;
margin: 50px 0px 0px 0px;
}

#main {
position: relative;
width: 700px;
height: 200px;
text-align:left!important;
}

#main_left {position: relative;float:left;}
#main_middle{position: relative;float:right;}
#main_right {position: relative;float:right;right: 15px;}

#main_left,
#main_middle,
#main_right {
height: 100%;
width: 200px;
border: #000 solid 2px;
padding: 5px 10px 5px 10px;
}
#main_left:hover,
#main_middle:hover,
#main_right:hover {
border: #F1001C solid 2px;
}

.drop_hover {
position:relative;
border: 1px #000 dotted!important;
}

#play h3 {
position: relative;
width: 100px;
cursor: pointer;
background-color: #ccc;
}

Espero que sirva de ayuda para alguno. Yo tengo el efecto puesto en una de mis webs dotadas de un diseño pésimo digno del programador que llevo dentro.

• Demo


• Archivos