javascript - html5ドラッグアンドドロップのワークフロー

Question

ドラッグアンドドロップを使用すると混乱します。これまでのところ、要素をドラッグアンドドロップできます。しかし、ドロップが終了した後に構造を保存したいので、ドロップしたターゲットをドロップ後の親に追加すると、オンドラッグが毎回2回呼び出され、オンドロップがターゲット要素の数に基づいて呼び出されることがわかります。それを実装する方法は？

function drop(){
  //this function is called base on the numbers of target element
  //drop third into first/second will be called once
  //drop second into first and then drop third into second will be called twice
}
function over(){
  //this function is called base on the numbers of total affected element
  //drop third into first/second will be called twice
  //drop second into first and then drop third into second will be called thrice
}
<div ondrop=drop ondragend=over id="first"></div>
<div ondrop=drop ondragend=over id="second"></div>
<div draggable=true id="third"></div>

また、ドロップとオーバーの両方でreturn falseを使用しますが、問題を修正することもできません