HTML表DnD事件未在边界上触发

Question

我的html页面上有这个表：

<div class="col-sm-6 col-md-6 col-lg-6">
    <label class="control-label" for="myTable">My Table</label>
    <div id="myTable" class="table-border" ondragover="event.preventDefault()">
        <table class="table table-hover table-condensed">
            <thead>
                <tr>
                    <th class="text-muted">File Name</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

当我尝试将可拖动元素拖放到此表中时，只有在我删除表头（本例中为文件名）时才触发drop事件，或者如果table不为空则触发子行：

$('#myTable').on('drop', function (e) {
    e.preventDefault();
    alert('dropped');
});

任何想法如何让整个边框区域都可以删除？

谢谢！