angular-swing
angular-swing copied to clipboard
Can't throw out cards on iPhone
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!
I got the same problem
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);
Try setting throwOutConfidence as this -
return Math.min(Math.abs(offset) / (element.offsetWidth / 2), 1);
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.
Also noticing this on mobile.
did anyone get this working updating the config variables from within Angular?
@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 : good to know, thank you. I guess I'm doing the same thing then. :)
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?
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);
}
}