Para poder arrastrar y soltar capas (drag and drop) utilizaremos los eventos relacionados con el ratón, para poder capturar la posición en la que se encuentra y a partir de ella arrastrar y desplazar cualquier capa. Los eventos relacionados con el ratón son: onMouseDown (al hacer clic), onMouseUp (al soltar) y onMouseMove (al mover el ratón). Como en casi todo lo relacionado con el DHTML, los dos principales navegadores (Netscape y Explorer) se comportan de forma diferente a la hora de manejar dichos eventos, por lo que tendremos que escribir distinto código para cada uno de ellos.

Para practicar he hecho el juego del 3 en raya, haciendo que las fichas se pueden arrastrar y soltar por el tablero. Más adelante cuando tenga un poco de tiempo explicaré en detalle cómo funcionan estos eventos, aunque es de forma bastante similar a los de teclado.

Aquí puedes ver este ejemplo.

Usando los scripts de Dan Steinman

Otra opción será usar los magníficos scripts de libre de distribución creados por Dan Steinman, drag.js y dynlayer.js

El código a introducir es el necesario para usar ambos scripts y las órdenes para inicializar tanto las capas como los eventos del ratón:

<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="drag.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function init() {
        // inicializar capas (tantas líneas como capas), donde se debe sustituir 
nombrecapa por los nombres que hayamos usado al crear las capas
        capa0 = new DynLayer("nombrecapa",null)
        capa1 = new DynLayer("nombrecapa",null)

        // añadir al objeto "drag" las capas que se quieren poder mover
        drag.add(capa0,capa1)

        // inicializar eventos de ratón
        document.onmousedown = mouseDown
        document.onmousemove = mouseMove
        document.onmouseup = mouseUp
        if (is.ns) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE
 | Event.MOUSEUP)
}

function mouseDown(e) {
        if ((is.ns && e.which!=1) || (is.ie && event.button!=1)) return true
        var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
        var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
        if (drag.mouseDown(x,y)) {
          // escribir aquí el código para hacer cualquier cosa al comenzar a arrastrar
                return false
        }
        else return true
}
function mouseMove(e) {
        var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
        var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
        if (drag.mouseMove(x,y)) {
          // escribir aquí el código para hacer cualquier cosa mientras arrastramos
                return false
        }
        else return true
}
function mouseUp(e) {
        var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
        var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
        if (drag.mouseUp()) {
          // escribir aquí el código para hacer cualquier cosa al finalizar el arrastrar 
                 return false
        }
        else return true
}
</SCRIPT>

Aquí puedes ver este ejemplo.

---