jQuery - UG glissable - Comment détecter si l'élément a été déplacé vers un point, puis appeler une animation

J'ai cette div qui peut être déplacée verticalement hors de l'écran. Je veux savoir s'il existe un moyen de détecter si cette div a dépassé une certaine limite, puis afficher une animation où elle glisse automatiquement hors de la page. Ce que j'ai fait jusqu'à présent, je pensais que cela devrait marcher, mais hélas, ma connaissance médiocre de JavaScript a fait sa fin laide. Voici ce que j'ai jusqu'à présent:jQuery - UG glissable - Comment détecter si l'élément a été déplacé vers un point, puis appeler une animation

$(document).ready(function() { 
    $("div").draggable({ 
     axis: "y", // vertical drag only 
     drag: function(event, ui) { // THIS NEXT BLOCK JUST MAKES SURE IT WON'T DRAG OFF THE BOTTOM OF SCREEN 
      if($(this).offset().top + $(this).outerHeight() > $(window).height()) { 
       $(this).offset({"top": $(window).height() - $(this).outerHeight()}); 
       event.preventDefault(); 
      } 
     } 
    }); 

    if($("div").css("top") == "-340px") { 
     $("div").animate({ 
      top: "-100%" 
     }); 
    } 
});

Je sais que l'interface utilisateur jQuery « Draggable » utilise la propriété top parce que je regardais dans l'outil de débogage de Google Chrome et comme je traînais insère dynamiquement les styles en ligne, et je lis top: -(x)px; continuer à grimper pendant que je traînais la div. Donc, logiquement, j'ai testé pour voir si ça se traîne passer -340px puis il suffit de le faire glisser automatiquement le reste du chemin.

Et aussi, si possible, je voudrais pour la div pour dérouler (en utilisant revert?) Si elle ne dépasse pas -340px, mais ce n'est pas un gros problème vraiment.

Source

2012-12-02 randmath

peut être [confinement] (http://api.jqueryui.com/draggable/#option-containment) te suffira-t-il? –

Euh, j'ai regardé ça, comme peut-être ajouter un droppable, mais je ne semble pas faire un travail facile de ça. Si quelqu'un pouvait trouver une solution en utilisant le confinement des gouttes, cela ne me dérangerait pas, mais je préférerais construire à partir de ce que j'ai déjà. Si quelqu'un veut utiliser droppable pour sa réponse, mon div est 100% x 100% (comme un écran de verrouillage), que vous faites glisser hors de l'écran pour révéler le contenu de la page. Cette div est basculée après le délai d'inactivité d'un utilisateur. – randmath

pouvez-vous étendre http://jsbin.com/oxotek/1/edit pour qu'il reproduise votre problème? –

Votre état n'est pas au bon endroit; vous devriez faire la vérification une fois que le Drag est même lancé!

voir ci-dessous le code ici vérifier si la position est supérieure puis 100 et tirer l'animation:

<html> 
<head> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
<script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
</head> 
<body> 
<div id="draggable" class="ui-widget-content ui-draggable" style="position: relative;"> 
    <p>Drag me around</p> 
</div> 
<script> 
$(document).ready(function() { 
    $("div").draggable({ 
     axis: "y", // vertical drag only 
     drag: function(event, ui) { // THIS NEXT BLOCK JUST MAKES SURE IT WON'T DRAG OFF THE BOTTOM OF SCREEN 
      if($(this).offset().top + $(this).outerHeight() > $(window).height()) { 
       $(this).offset({"top": $(window).height() - $(this).outerHeight()}); 
       event.preventDefault(); 
      } 

      if(Number($("div").css("top").replace("px","")) > 100) { 
       $("div").animate({ 
        top: "-100%" 
       }); 
      } 
     } 
    }); 
}); 
</script> 
</body> 
</html>

Source

2012-12-02 01:12:38 Anass

Merci. Cela fonctionnera. Encore un _bit_ agité, mais a résolu mon problème. Merci encore. – randmath

jQuery - UG glissable - Comment détecter si l'élément a été déplacé vers un point, puis appeler une animation

Répondre

Questions connexes