Drag and drop usando Scriptaculous (2)

El Drag and Drop de script.aculo.us tiene dos partes, arrastrar (drag) y soltar (drop).

Los elementos arrastrables se definían así:
new Draggable(IDelemento, opciones);

Para controlar lo que hace un elemento cuando lo soltamos luego de arrastrarlo, usamos este método:
Droppables.add(IDelemento, opciones);
donde el ID es el del elemento destino es decir, donde soltaremos algo que arrastramos.

Así, sin ninguna opción, si lo soltamos dentro del área, el objeto desaparece de nuestra vista:

<div id="bloqueArrastrar" style=".......">MOVER</div>
<div id="bloqueSoltar" style="......."> </div>
<script type="text/javascript">
new Draggable('bloqueArrastrar');
Droppables.add('bloqueSoltar');
</script>

Este es el resumen de las posibles opciones a utilizar:

Hoverclass es la clase CSS optativa que será agregada al elemento contenedor cuando algo sea arrastrado dentro de ella.

<div id="bloqueArrastrar" style=".......">MOVER</div>
<div id="bloqueSoltar" style="......."> </div>
<script type="text/javascript">
new Draggable('bloqueArrastrar', {revert: true});
Droppables.add('bloqueSoltar', {hoverclass: 'claseHover'});
</script>

Accept es también el nombre de una clase CSS pero con esta, podemos definir cuales son los elementos que podemos arrastrar y soltar en ese área.

En el ejemplo, uno de los bloques es aceptado y el otro no:

<div id="demo1" class="esteSI">MOVER</div>
<div id="demo2" class="esteNO">MOVER</div>
<div id="boqueSoltar"> </div>
<script type="text/javascript">
new Draggable('demo1', {revert: true});
new Draggable('demo2', {revert: true});
Droppables.add('bloqueSoltar', {accept: 'esteSI', hoverclass: 'claseHover'});
</script>

Aprovechemos el ejemplo del puzzle que nos muestra la Wiki de Scriptaculous para crear algo más y ver de qué se trata todo esto:

<script type="text/javascript">
(function() { 
var p = $('puzzle'), info = $('puzzleinfo'), moves = 0;
Sortable.create('puzzle', {
tag: 'img', overlap: 'horizontal', constraint: false,
onUpdate: function() {
info.update('Hasta ahora hubo ' + (++moves) + ' movimiento' + (moves > 1 ? 's' : ''));
if (Sortable.sequence('puzzle').join('') == '123456789')
info.update('Puzzle resuelto en ' + moves + ' movimientos').morph('felicitaciones');
}
});
})();
</script>

<style type="text/css">
#puzzle {margin: 0 auto; width: 450px;} 
.felicitaciones {color: #FF9933 !important;}
</style>