PixelsCommander / Propeller

JavaScript library to rotate elements with mouse or touch gestures. Supports inertia and stepwise rotation. Optimized for better performance.
http://pixelscommander.com/polygon/propeller/
409 stars 58 forks source link

Doesn't work on chrome browser #29

Open spezialy opened 7 years ago

spezialy commented 7 years ago

Hello, i determine in my test with the propeller.js lib that it doesn't work on my chrome browser (Version 57.0.2987.110) under windows. On your example page (http://pixelscommander.com/polygon/propeller/example/jquerygrid.html) the behavior is the same, i can not grab and move the propeller.

nameless0815 commented 7 years ago

Same problem here!

Chrome seems to register on touch events, caused by this code:

        if ('ontouchstart' in document.documentElement) {
            this.touchElement.addEventListener('touchstart', this.onRotationStart);
            this.touchElement.addEventListener('touchmove', this.onRotated);
            this.touchElement.addEventListener('touchend', this.onRotationStop);
            this.touchElement.addEventListener('touchcancel', this.onRotationStop);
            this.touchElement.addEventListener('dragstart', this.returnFalse);
        } else {
            this.touchElement.addEventListener('mousedown', this.onRotationStart);
            this.touchElement.addEventListener('mousemove', this.onRotated);
            this.touchElement.addEventListener('mouseup', this.onRotationStop);
            this.touchElement.addEventListener('mouseleave', this.onRotationStop);
            this.touchElement.addEventListener('dragstart', this.returnFalse);
        }

You can register both types of events (mouse and touch) without any if clause to get it working again:

        this.touchElement.addEventListener('touchstart', this.onRotationStart);
        this.touchElement.addEventListener('touchmove', this.onRotated);
        this.touchElement.addEventListener('touchend', this.onRotationStop);
        this.touchElement.addEventListener('touchcancel', this.onRotationStop);
        this.touchElement.addEventListener('mousedown', this.onRotationStart);
        this.touchElement.addEventListener('mousemove', this.onRotated);
        this.touchElement.addEventListener('mouseup', this.onRotationStop);
        this.touchElement.addEventListener('mouseleave', this.onRotationStop);
        this.touchElement.addEventListener('dragstart', this.returnFalse);