0

Buen día,

Estoy utilizando raphael.js para manipular imágenes dentro de un "paper" He notado que todos los eventos (click, mousedown, mouseup, dragstart...) se inician con cualquier botón del mouse.

En este JSFiddle hay un ejemplo de drag a dos objetos, es posible moverlos con el click izquierdo, derecho y central del mouse

¿Cómo puedo hacer para que el click derecho y medio no puedan hacer drag a un objeto?

He leido que para diferenciar qué botón inicia el evento puedo utilizar e.which, que devuelve 1, 2 ó 3 dependiendo del botón que se utilizó pero no he encontrado la forma de utilizar esta variable para filtrar el inicio de un click, mousedown o drag

Encontré un Bug report sobre el tema pero no ha solucionado desde el 2012. Intenté utilizar el código que viene en el reporte comentándolo todo y excepto la parte de if(e.which == 1) para luego hacer una entrada en la consola. Al hacer esto la entrada únicamente aparece cuando intento hacer drag con el click izquierdo así que en teoría está bien pero no encuentro forma de adaptar lo demás

Alguien sabe que es g.doc.documentElement o g.doc.body?

De antemano muchas gracias Saludos

1 respuesta 1

0

He encontrado una forma de hacerlo.

En lugar de instalar raphael.js con npm install raphael, descargué el archivo js desde github, al tener el código fuente edité la función drag de la siguiente forma:

elproto.drag = function (onmove, onstart, onend, move_scope, start_scope, end_scope) {
        function start(e) {
            if (e.which == 1) {
                (e.originalEvent || e).preventDefault();
                var x = e.clientX,
                    y = e.clientY,
                    scrollY = g.doc.documentElement.scrollTop || g.doc.body.scrollTop,
                    scrollX = g.doc.documentElement.scrollLeft || g.doc.body.scrollLeft;
                this._drag.id = e.identifier;
                if (supportsTouch && e.touches) {
                    var i = e.touches.length, touch;
                    while (i--) {
                        touch = e.touches[i];
                        this._drag.id = touch.identifier;
                        if (touch.identifier == this._drag.id) {
                            x = touch.clientX;
                            y = touch.clientY;
                            break;
                        }
                    }
                }
                this._drag.x = x + scrollX;
                this._drag.y = y + scrollY;
                !drag.length && R.mousemove(dragMove).mouseup(dragUp);
                drag.push({el: this, move_scope: move_scope, start_scope: start_scope, end_scope: end_scope});
                onstart && eve.on("raphael.drag.start." + this.id, onstart);
                onmove && eve.on("raphael.drag.move." + this.id, onmove);
                onend && eve.on("raphael.drag.end." + this.id, onend);
                eve("raphael.drag.start." + this.id, start_scope || move_scope || this, this._drag.x, this._drag.y, e);
            }
        }
        this._drag = {};
        draggable.push({el: this, start: start});
        this.mousedown(start);
        return this;
    };

Se tiene que agregar la condición e.which==1 para cada evento de raphael en caso de que se desee distinguir el botón de mouse que inicia el evento

Espero que la información sea de utilidad

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.