JS でドラッグ アンド ドロップするときに子要素内にドロップされないようにする 質問する

シンプルなドラッグ アンド ドロップ設定を作成しました。2 つの div があり、ユーザーはその間に子 div をドラッグできます。子 div が別の div 内に直接ドロップされない限り、正常に動作します。何時間も考えてきましたが、私が見逃している簡単な解決策があるはずです。

（まだ完全には動作していないが）デモはここで見ることができる。https://preview.c9.io/teemoash/fantasyleague/gamething/pete.html?_c9_id=livepreview4&_c9_host=https%3A%2F%2Fide.c9.io

ご協力いただければ幸いです

ありがとう！

HTML は非常にシンプルです。(onDrop および onDragOver イベントで false を返すようにしたことに注意してください)

    <div id = "squad" ondrop="drop(event)" ondragover="allowDrop(event)">
    <h1>SQUAD</h1>
    <div id = "jeff" class = "champion" draggable = "true" ondragstart="drag(event)" ondrop = "return false" ondragover="return false">
        <h1>Jeff</h1>

        <div class = "attributes">
            <div class = "number kills"><span> 4</span><p>Kills</p></div>
            <div class = "number deaths"><span>2 </span><p>Deaths</p></div>
            <div class = "number GPM"><span> 12</span><p>GPM</p></div>

        </div>
    </div>


    <div id = "Geoff" class = "champion" draggable = "true" ondragstart="drag(event)" ondrop = "return false" ondragover="return false">
        <h1>Geoff</h1>

        <div class = "attributes">
            <div class = "number kills"><span> 7</span><p>Kills</p></div>
            <div class = "number deaths"><span>0 </span><p>Deaths</p></div>
            <div class = "number GPM"><span> 14</span><p>GPM</p></div>

        </div>
    </div>

    <div id = "jeph" class = "champion" draggable = "true" ondragstart="drag(event)" ondrop = "return false" ondragover="return false">
        <h1>Jeph</h1>

        <div class = "attributes">
            <div class = "number kills"><span> 1</span><p>Kills</p></div>
            <div class = "number deaths"><span>9 </span><p>Deaths</p></div>
            <div class = "number GPM"><span> 24</span><p>GPM</p></div>

        </div>
    </div>

</div> <!-- end of squad div-->

<div id = "myTeam" ondrop="drop(event)" ondragover="allowDrop(event)">
    <h1>My Team</h1>

</div>

<div id = "scores">
    <h1>My Team Scores</h1>
</div>

<script>


function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {

 ev.preventDefault();
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));

}
</script>