HTML5 élément de déplacement tout en faisant glisser

Question

Il y a quelque chose de vraiment simple, je veux faire via le glisser HTML5 déposer API:

1. Faire un élément draggable sur l'axe y . Lorsque l'utilisateur commence à faire glisser l'élément , il commence à se déplacer sur l'axe y .
2. Après 50px vers le bas sur l'axe des y, le glissement doit s'arrêter et une animation prend le relais.

C'est ce que j'ai:

<div draggable="true">Hi there!</div> 

<script> 
$('div') 
.bind('dragstart', function(event) { 

    console.log('dragstart'); 
}) 
.bind('drag', function(event) { 

    /* start pseudo code */ 

    if(y > 50px) { 
     stop dragging 
     start animation 
    } 

    /* end pseudo code */ 

    console.log('drag'); 
}) 
.bind('dragend', function(event) { 

    console.log('end'); 
}) 
.bind('drop', function(event) { 

    console.log('drop'); 
}); 
<script> 

Le seul journal de la console que je reçois est dragstart.

Answer 1

$(document).ready(function() { 
 
    $('#newschool .dragme') 
 
     .attr('draggable', 'true') 
 
     .bind('dragstart', function(ev) { 
 
      var dt = ev.originalEvent.dataTransfer; 
 
      dt.setData("Text", "Dropped in zone!"); 
 
      return true; 
 
     }) 
 
     .bind('dragend', function(ev) { 
 
      return false; 
 
     }); 
 
    $('#newschool .drophere') 
 
     .bind('dragenter', function(ev) { 
 
      $(ev.target).addClass('dragover'); 
 
      return false; 
 
     }) 
 
     .bind('dragleave', function(ev) { 
 
      $(ev.target).removeClass('dragover'); 
 
      return false; 
 
     }) 
 
     .bind('dragover', function(ev) { 
 
      return false; 
 
     }) 
 
     .bind('drop', function(ev) { 
 
      var dt = ev.originalEvent.dataTransfer; 
 
      alert(dt.getData('Text')); 
 
      return false; 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="newschool"> 
 
    <div class="dragme">Drag me!</div> 
 
    <div class="drophere">Drop here!</div> 
 
</div>