angular-swing icon indicating copy to clipboard operation
angular-swing copied to clipboard

Can't throw out cards on iPhone

Open tobiasmuecksch opened this issue 10 years ago • 10 comments

I'm using angular swing in an ionic app. It works perfectly so far. But currently I have the issue that I can't throw out cards in any direction. They just snap back. I only can throw cards out, if I touch them on the outmost edge in the opposite direction of which I'm throwing. Is it possible to set a minimum distance a card has to be dragged to count as thrown out?

I hope I expressed my problem correctly :)

Thanks in advance!

tobiasmuecksch avatar Jan 03 '15 15:01 tobiasmuecksch

I got the same problem

martinpfannemueller avatar Jan 03 '15 16:01 martinpfannemueller

i am also having the same problem, i am trying to config throwOutConfidence to be 0.5 but cant seem to do it using the configuration method in the swig documentation. Any help is much apreciated.

var stack,
    config;

config = {
    /**
     * Invoked in the event of dragmove.
     * Returns a value between 0 and 1 indicating the completeness of the throw out condition.
     * Ration of the absolute distance from the original card position and element width.
     * 
     * @param {Number} offset Distance from the dragStart.
     * @param {HTMLElement} element Element.
     * @return {Number}
     */
    throwOutConfidence: function (offset, element) {
        return Math.min(Math.abs(offset) / element.offsetWidth, 1);
    }
};

stack = stack = Swing.Stack(config);

BrianPhilips avatar Feb 19 '15 16:02 BrianPhilips

Try setting throwOutConfidence as this -

return Math.min(Math.abs(offset) / (element.offsetWidth / 2), 1);

m10l avatar Mar 04 '15 11:03 m10l

Thank you @m10l I understand how you would decrease the throwOutConfidence, but i don’t know where to call the TrowOutConfidence function. I am using the angular-swig implementation so i do not invoke the stack by calling Swing.Stack(config), when I try calling it from my controller I get Swing is not defined; I Am using the swing-card and swing-stack directive. Should I call it from within an event listener and try invoking it on the dragmove event like the commented section of the config object states (* Invoked in the event of dragmove.)?? I was able to get it to work by changing the TrowOutConfidence directly in angular-swing.js. but that is far from ideal.

BrianPhilips avatar Mar 04 '15 15:03 BrianPhilips

Also noticing this on mobile.

IVLMediaInc avatar Apr 14 '15 03:04 IVLMediaInc

did anyone get this working updating the config variables from within Angular?

thehashrocket avatar Jul 16 '15 01:07 thehashrocket

@jshultz I had to fork this directive and change it to suit my needs. Sadly there is no option to pass in configuration into the directive.

tobiasmuecksch avatar Jul 16 '15 09:07 tobiasmuecksch

@tobiasmuecksch : good to know, thank you. I guess I'm doing the same thing then. :)

thehashrocket avatar Jul 18 '15 17:07 thehashrocket

So, what is the best option to solve this? When I test it in normal view in chrome, I do get the bumping back and dnd effect, and with the solution @m10l return Math.min(Math.abs(offset) / (element.offsetWidth / 2), 1) inside my own controller and with swing-options="swingoptions" on the HTML element `` $scope.swingoptions = { throwOutConfidence: function (offset, element) { console.log('throwOutConfidence', offset, element.offsetWidth); return Math.min(Math.abs(offset) / (element.offsetWidth/2), 1);//solution of m10l }, isThrowOut: function (offset, element, throwOutConfidence) { console.log('isThrowOut', offset, element.offsetWidth, throwOutConfidence); return throwOutConfidence === 1; } };

`` the cards do stay aside the stack. Sadly enough, when I test it with dev tools ipad it doesn't work at all, is this just the dev tools?

Lenndev avatar Jul 28 '16 13:07 Lenndev

In Vuejs in the config data i defined the following:

config: { throwOutConfidence: (xOffset, yOffset, element) => { const xConfidence = Math.min(Math.abs(xOffset) / (element.offsetWidth / 2), 1); const yConfidence = Math.min(Math.abs(yOffset) / (element.offsetHeight / 2), 1);

                return Math.max(xConfidence, yConfidence);
            }
        }

shmdesign avatar Aug 23 '18 13:08 shmdesign