Arrastra y suelta

Ya van varias veces que me preguntan como hacer un Drag&Drop. Como veo es una petición muy popular, y usada en muchos juegos, he decidido agregar esta entrada para explicar como realizar esta técnica, que, aunque parece complicada, en realidad es bastante sencilla. Y como es costumbre en este blog, haremos esta tarea aun más sencilla de ser posible. Comenzaremos declarando las nuevas variables que necesitaremos:

        lastPress = null,
        lastRelease = null,
        mouse = {x: 0, y: 0},
        pointer = {x: 0, y: 0},
        dragging = null,
        draggables = [],

La variable lastPress ya es conocida para nosotros. Agregamos un lastRelease que nos indicará el momento en que soltamos el ratón, un arreglo draggables que contendrá todos nuestros elementos arrastrables, y una variable dragging que nos indicará el elemento que estamos arrastrando en este momento, cuyo valor será nulo en caso de no arrastrar ninguno.

Quizá lo que resulta más llamativo, es la forma en que se declara la variable "mouse", con varios valores en el interior de unas llaves. Esta es la forma de declarar un objeto de forma directa, que sería similar a crear una función de tipo pseudo-clase y asignársela posteriormente. Sin embargo, en vez de hacer esto lo he hecho de forma directa en esta ocasión para crear un punto de coordenadas, ya que solo estoy almacenando un objeto con dos variables y sin funciones, y resulta más rápido hacerlo de esta forma que crear una función solo para ello. También he creado una segunda variable similar llamada "pointer", que almacenará una versión personalizable de la posición del ratón, de forma similar como se hacía con la función "player" anteriormente, para mantener siempre visible dentro del juego, aun cuando el ratón no lo esté.

Para que pueda haber interacción entre círculos y puntos, es necesario modificar ligeramente la función "distance" en nuestra función "circle" de esta forma:

    Circle.prototype.distance = function (circle) {
        if (circle !== undefined) {
            var dx = this.x - circle.x,
                dy = this.y - circle.y,
                circleRadius = circle.radius || 0;
            return (Math.sqrt(dx * dx + dy * dy) - (this.radius + circleRadius));
        }
    };

Notarás que agregamos una variable llamada "circleRadius" a la que se le asigna el radio del círculo que mandamos, o cero si no la encuentra. Como los puntos de coordenadas solo contienen posición X y Y, cuando se mande uno de estos para comparar su distancia de un círculo, se le asignará un radio temporal de cero, y de esta forma no efectuará un error al intentar sumar su radio al del círculo actual, pudiendo obtener la distancia entre el círculo y el punto de forma exitosa.

Reutilizando parte del código Distancia entre círculos, modificaremos la función enableInputs para agregar las nuevas acciones, así como actualizar mousemove para el nuevo objeto que contiene la posición del ratón. De igual forma que al presionar un botón del mouse se almacena el valor en lastPress, se hará lo mismo al soltar el botón con lastRelease:

    function enableInputs() {
        document.addEventListener('mousemove', function (evt) {
            mouse.x = evt.pageX - canvas.offsetLeft;
            mouse.y = evt.pageY - canvas.offsetTop;
        }, false);
        
        document.addEventListener('mouseup', function (evt) {
            lastRelease = evt.which;
        }, false);
        
        canvas.addEventListener('mousedown', function (evt) {
            evt.preventDefault();
            lastPress = evt.which;
        }, false);
    }

Nota que a diferencia de mousedown, el escucha del mouseup es asignado a document. Esto es por que, en caso que el botón del ratón sea liberado fuera del canvas, aun deseamos dejar de ejecutar cualquier acción que pudiera haber empezado dentro del mismo.

Ahora crearemos cinco círculos arrastrables dentro de la función init, justo después de iniciar nuestro canvas, asignándole posiciones al azar dentro del área de nuestro juego:

        // Create draggables
        for (i = 0; i < 5; i += 1) {
            draggables.push(new Circle(random(canvas.width), random(canvas.height), 10));
        }

En la función act, después de mover la posición del ratón, veremos si el botón izquierdo del ratón acaba de ser presionado. De ser así, analizaremos cada uno de los elementos dentro del arreglo draggable, para ver si el cursor está posicionado sobre uno de los objetos arrastrables y en caso de encontrar uno, este será asignado a la variable dragging:

        if (lastPress === 1) {
            // Check for current dragging circle
            for (i = 0, l = draggables.length; i < l; i += 1) {
                if (draggables[i].distance(pointer) < 0) {
                    dragging = i;
                    break;
                }
            }
        }

Notarás que al asignar la posición del objeto a dragging, hacemos un break. Esto hará que se dejen de leer los demás elementos del for, con el motivo de que, en caso de que haya dos elementos arrastrables encimados uno sobre el otro, solo tome el primero de la lista, para así evitar que queden pegados varios elementos en el ratón.

A continuación, se analiza si, en caso contrario de haber presionado el botón izquierdo del ratón, este ha sido liberado, y en caso de ser así, dragging vuelve a tener un valor nulo:

        else if (lastRelease === 1) {
            // Release current dragging circle
            dragging = null;
        }

Por último, si dragging no tiene un valor nulo, entonces el elemento que está siendo arrastrado obtendrá la posición del ratón:

        // Move current dragging circle
        if (dragging !== null) {
            draggables[dragging].x = pointer.x;
            draggables[dragging].y = pointer.y;
        }

Para finalizar, dibujaremos los elementos en pantalla. He agregado una línea de texto que indica el elemento que está siendo arrastrado:

        // Draw circles
        ctx.fillStyle = '#00f';
        for (i = 0, l = draggables.length; i < l; i += 1) {
            draggables[i].fill(ctx);
        }
        
        // Debug pointer position
        ctx.fillStyle = '#0f0';
        ctx.fillRect(pointer.x - 1, pointer.y - 1, 2, 2);
        
        // Debug dragging circle
        ctx.fillStyle = '#fff';
        ctx.fillText('Dragging: ' + dragging, 0, 10);

De esta forma, hemos creado un sencillo Drag&Drop.

Código final:

[Canvas not supported by your browser]

/*jslint bitwise: true, es5: true */
(function (window, undefined) {
    'use strict';
    var canvas = null,
        ctx = null,
        lastPress = null,
        lastRelease = null,
        mouse = {x: 0, y: 0},
        pointer = {x: 0, y: 0},
        dragging = null,
        draggables = [],
        i = 0,
        l = 0;
    
    function Circle(x, y, radius) {
        this.x = (x === undefined) ? 0 : x;
        this.y = (y === undefined) ? 0 : y;
        this.radius = (radius === undefined) ? 0 : radius;
    }
    
    Circle.prototype.distance = function (circle) {
        if (circle !== undefined) {
            var dx = this.x - circle.x,
                dy = this.y - circle.y,
                circleRadius = circle.radius || 0;
            return (Math.sqrt(dx * dx + dy * dy) - (this.radius + circleRadius));
        }
    };
    
    Circle.prototype.fill = function (ctx) {
        if (ctx !== undefined) {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
            ctx.fill();
        }
    };
    
    function enableInputs() {
        document.addEventListener('mousemove', function (evt) {
            mouse.x = evt.pageX - canvas.offsetLeft;
            mouse.y = evt.pageY - canvas.offsetTop;
        }, false);
        
        document.addEventListener('mouseup', function (evt) {
            lastRelease = evt.which;
        }, false);
        
        canvas.addEventListener('mousedown', function (evt) {
            evt.preventDefault();
            lastPress = evt.which;
        }, false);
    }
    
    function random(max) {
        return ~~(Math.random() * max);
    }
    
    function paint(ctx) {
        // Clean canvas
        ctx.fillStyle = '#000';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // Draw circles
        ctx.fillStyle = '#00f';
        for (i = 0, l = draggables.length; i < l; i += 1) {
            draggables[i].fill(ctx);
        }
        
        // Debug pointer position
        ctx.fillStyle = '#0f0';
        ctx.fillRect(pointer.x - 1, pointer.y - 1, 2, 2);
        
        // Debug dragging circle
        ctx.fillStyle = '#fff';
        ctx.fillText('Dragging: ' + dragging, 0, 10);
    }
    
    function act() {
        // Set pointer to mouse
        pointer.x = mouse.x;
        pointer.y = mouse.y;
        
        // Limit pointer into canvas
        if (pointer.x < 0) {
            pointer.x = 0;
        }
        if (pointer.x > canvas.width) {
            pointer.x = canvas.width;
        }
        if (pointer.y < 0) {
            pointer.y = 0;
        }
        if (pointer.y > canvas.height) {
            pointer.y = canvas.height;
        }
        
        if (lastPress === 1) {
            // Check for current dragging circle
            for (i = 0, l = draggables.length; i < l; i += 1) {
                if (draggables[i].distance(pointer) < 0) {
                    dragging = i;
                    break;
                }
            }
        } else if (lastRelease === 1) {
            // Release current dragging circle
            dragging = null;
        }
        
        // Move current dragging circle
        if (dragging !== null) {
            draggables[dragging].x = pointer.x;
            draggables[dragging].y = pointer.y;
        }
    }
    
    function run() {
        window.requestAnimationFrame(run);
        act();
        paint(ctx);
        
        lastPress = null;
        lastRelease = null;
    }
    
    function init() {
        // Get canvas and context
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        canvas.width = 200;
        canvas.height = 300;
        
        // Create draggables
        for (i = 0; i < 5; i += 1) {
            draggables.push(new Circle(random(canvas.width), random(canvas.height), 10));
        }
        
        // Start game
        enableInputs();
        run();
    }
    
    window.addEventListener('load', init, false);
}(window));