Javascript Girl
  1. Javascript Girl
  3. Geste de traînée de style Tinder et baisse avec Javascript?
Intereting Posts
Json, rails, erreur d'analyse dans javascript Les variables AppleScript passées à JavaScript Quel est un point d'exclamation en JavaScript? Comment garder une division flottante centrée sur le redimensionnement de la fenêtre (jQuery / CSS) JQuery Memory Leak Suspicion Bouton de chargement personnalisé Comment obtenir le nom de la classe via JavaScript Xpath insensible aux cas contient () possible? Comment puis-je inverser les groupes de contrôles via jQuery? L'objet et la fonction sont assez confus Comment annuler Ctrl + N dans Firefox pour lancer AJAX Mise en surbrillance de texte multicolore dans un Textarea ou entrée de texte Maximum Lat et Long limites pour le monde – Google Maps API LatLngBounds () DOMNodeInserted équivalent dans IE? Texte en div – défilement automatisé avec jQuery – jsFiddle à l'intérieur

Geste de traînée de style Tinder et baisse avec Javascript?

J'essaie de comprendre les bibliothèques que je peux utiliser pour un geste de traînée et de goutte de type Tinder qui utilise uniquement Javascript.

  1. Nécessite de créer un élément HTML qui répond à un geste de glisser.
  2. Lorsqu'il est touché et maintenu, permet à l'élément de suivre le doigt de l'utilisateur.

  3. Lorsque l'utilisateur enlève son doigt, l'élément soit:

    Retourne à sa position d'origine

    Si l'élément est sur une zone de dépôt spécifiée lorsqu'il est relâché, l'élément va animer et disparaître et il doit y avoir une sorte d'événement qui déclenche qui contient quel élément a été abandonné et quelle zone de dépôt a été abandonnée dans

J'ai regardé HammerJS mais il ne semble pas qu'il y ait un soutien pour les zones de dépôt.

L'événement Hover de jQuery ne semble pas fonctionner pour les doigts.

Ma solution pour cela lorsque j'avais besoin de supporter l'événement de glisser-déposer sur le bureau et le mobile était d'utiliser Touch-punch et Jquery-UI .

Il mappe les événements tactiles (début / déplacement / fin) aux événements de la souris et pour les fonctionnalités basiques de jquery ui draggable a bien fonctionné. Pas de code supplémentaire et je pourrais utiliser draggable et droppable au besoin pour effectuer les fonctions de suppression, de sortie et de sortie.

Pour quelques exemples de la glisser-déposer dans l'interface utilisateur jquery, regardez http://jqueryui.com/droppable/#revert http://jqueryui.com/draggable/

Ceux-ci travailleront tous deux avec des événements tactiles lorsqu'ils incluront un coup de poing sur votre page avec jquery-ui

Combinez avec un clic rapide pour supprimer le délai de 300 ms dans les événements tactiles et le retard de glisser peut être grandement amélioré ici est un exemple (exemple: jquery-ui vient d'ajouter un coup de poing et un clic rapide) http://codepen.io/leighquince / Pen / ztpCL 

//normal setup from jquery ui $(function() { $( "#draggable" ).draggable({ revert: "valid" }); $( "#draggable2" ).draggable({ revert: "invalid" }); $( "#droppable" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); });

JTinder semble être très proche de ce que vous recherchez. Les autres commentaires sur cette page ont été principalement écrits avant que jTinder ne soit disponible.

Démo de jTinder

JTinder Code source sur Github

Autre question étroitement liée: Faire passer la pile de photos comme Tinder – Cross-platform (Hybride / HTML5 est OK)

Veuillez laisser les commentaires ci-dessous sur votre expérience avec jTinder et la vitesse de réponse avec différents périphériques.

Je suis l'auteur de Swing :

Une interface de cartes swipeable. La glisse-gauche / glisse-droite pour l'entrée oui / non. Comme l'ont vu dans des applications comme Jelly et Tinder.

Balançoire

L'implémentation sous-jacente consiste à utiliser HammerJS pour gérer les gestes de glisser / toucher et Rebond pour calculer et actionner la dynamique du printemps (lorsque vous déposez la carte sur le pont).

La mise en œuvre actuelle n'implémente pas les zones de dépôt. L'implémentation actuelle repose sur throwOutConfidence . Par défaut, la carte est considérée hors du pont lorsqu'elle a été traînée plus de la moitié de sa largeur. Cependant, vous pouvez écraser throwOutConfidence dans la configuration pour relayer sur une logique personnalisée, par exemple, à quelle throwOutConfidence de la carte est votre deck de cartes (zone conçue pour déposer la carte).

Il existe une version autonome:

https://github.com/gajus/swing

Et version angulaire:

https://github.com/gajus/angulaire-swing

Consultez Swing JS: https://github.com/gajus/swing

Et pour angulaire: https://github.com/gajus/angulaire-swing