HTML5移動元素的同時拖動

Question

還有我想通過HTML5拖拽做拖放API很簡單的東西：

1. 使在y軸 元素可拖動。
2. 當用戶開始拖動 元素時，它開始在y軸上移動。
3. 在y軸上向下50px後，應該停止拖動，並且動畫會接管 。

這是我的本錢：

<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> 

中僅有的日誌在控制檯我得到的是的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>