javascript - que - raphaeljs arrastrar y soltar

que es snap svg

Question

Estoy usando rapaeljs para mi aplicación web. Quiero establecer límites del objeto extraíbles. El objeto puede moverse en el área dropable. Una vez que un objeto entra en un área desplegable, no debe haber salida para el objeto.

Answer 1

Raphael ha incorporado soporte para arrastrar y soltar a través de .drag() . Úselo en el formulario element.drag(start, move, up); Donde los 3 argumentos son 3 referencias de funciones a las funciones que escribe que tratan con los eventos de movimiento de ratón, movimiento y mouseup respectivamente.

Observe cómo se this.ox y this.oy para almacenar las posiciones iniciales y dx y dy se usan para el movimiento.

Lo siguiente implementa un arrastrar y soltar en un cuadro. La caja siempre se puede mover, pero una vez que está en la caja de "la cárcel", no se puede mover hacia afuera. Cuando la caja cruza hacia la cárcel, el color se cambia instantáneamente, para indicar al usuario que la funcionalidad ha cambiado.

Esto se implementa con un Math.min() y Math.max() de la posición de la caja después de agregar dx y dy a la posición actual:

var nowX, nowY, move = function (dx, dy) {
    // move will be called with dx and dy
    if (this.attr("y") > 60 || this.attr("x") > 60)
        this.attr({x: this.ox + dx, y: this.oy + dy}); 
    else {
        nowX = Math.min(60, this.ox + dx);
        nowY = Math.min(60, this.oy + dy);
        nowX = Math.max(0, nowX);
        nowY = Math.max(0, nowY);            
        this.attr({x: nowX, y: nowY });
        if (this.attr("fill") != "#000") this.attr({fill: "#000"}); 
    }
}

También puede hacer que la caja no se pueda volver a recoger una vez que se coloca en la caja de "cárcel". Esto se podría hacer con una prueba de posición en la función move() o start() o el uso de c.undrag(f) en la función stop() .

Ejemplo de jsFiddle

window.onload = function() {
var nowX, nowY, R = Raphael("canvas", 500, 500),
    c = R.rect(200, 200, 40, 40).attr({
            fill: "hsb(.8, 1, 1)",
            stroke: "none",
            opacity: .5,
            cursor: "move"
        }),
    j = R.rect(0,0,100,100),
    // start, move, and up are the drag functions
    start = function () {
        // storing original coordinates
        this.ox = this.attr("x");
        this.oy = this.attr("y");
        this.attr({opacity: 1});
        if (this.attr("y") < 60 &&  this.attr("x") < 60)
            this.attr({fill: "#000"});        
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        if (this.attr("y") > 60 || this.attr("x") > 60)
            this.attr({x: this.ox + dx, y: this.oy + dy}); 
        else {
            nowX = Math.min(60, this.ox + dx);
            nowY = Math.min(60, this.oy + dy);
            nowX = Math.max(0, nowX);
            nowY = Math.max(0, nowY);            
            this.attr({x: nowX, y: nowY });
            if (this.attr("fill") != "#000") this.attr({fill: "#000"}); 
        }
    },
    up = function () {
        // restoring state
        this.attr({opacity: .5});
        if (this.attr("y") < 60 && this.attr("x") < 60)
            this.attr({fill: "#AEAEAE"});            
    };   
    // rstart and rmove are the resize functions;
    c.drag(move, start, up);
};​