看起来你可以将处理程序附加到一个位于span之后和之上的覆盖div上：

<div class="col-md-12" data-bind="foreach: dropZones">
    <div class="drop_zone">
        <span>Drop files here</span>
        <div class="drop_zone_overlay" data-bind="event:{
                dragover:   function(data, e){ $root.dragover(e);},
                drop:       function(data, e){ $root.drop(e, $data);},
                dragenter:  function(data, e){ $root.dragenter(e, $index());},
                dragleave:  function(data, e){ $root.dragleave(e, $index());}
            }">
          </div>
    </div>
    <ul data-bind="foreach: elements" style="height: 100px">
        <li data-bind="text: $data"></li>
    </ul>
</div>

字符串
CSS

.drop_zone {
    border: 2px dashed #bbb;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    font: 20pt bold'Vollkorn';
    color: #bbb;

    position:relative;
}

.drop_zone_overlay { 
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

型
http://jsfiddle.net/rWWK5/
编辑
实际上，你根本不需要添加另一个元素。你可以用CSS :after创建一个伪元素，它应该可以覆盖内容。

.drop_zone {
    ...
    position:relative;
}
.drop_zone:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

型
http://jsfiddle.net/ewng9/的
编辑2
你可以使用这种技术来覆盖拖动时的内容。你只需要将.css({})调用改为toggleClass()，并将:after放在新类上。
http://jsfiddle.net/dKsmw/的
这也可以让你创建一个覆盖，着色的背景元素：

.drop_zone_hover:after{
    ...
    background-color:#0f0;
    opacity:0.6;
}

型

我认为Malk's answer是有效的。当你拖放时，使用覆盖或掩码来放置放置区域和子区域。这可以防止你在span上遇到的问题
我已经用你的最新例子创建了一个可以工作的Fiddle。

我遇到了这个问题。而且，和大多数问题一样，它们可以用JavaScript解决。
和OP一样，我也不想让一个元素覆盖整个放置区，并使可点击的元素变成惰性。
本质上，只要确保鼠标位置在容器的边界框内即可。
在dragleave事件处理程序中，使用getBoundingClientRect获取currentTarget的边界框。
拖动事件将具有表示鼠标位置的clientX和clientY属性。
检查鼠标位置福尔斯是否落在放置区的top、right、bottom和left边缘内。如果落在边界框内，则提前返回，不再处理dragleave事件。

const handleDragLeave = e => {
  if (isInsideContainer(e)) return
  e.currentTarget.classList.remove("dragged-over")
}

const isInsideContainer = e => {
  const { top, bottom, left, right } = e.currentTarget.getBoundingClientRect()
  return e.clientX < right && e.clientX > left && e.clientY > top && e.clientY < bottom
}

const dropzone = document.querySelector(".dropzone")

dropzone.addEventListener("dragenter", e => {
  e.currentTarget.classList.add("dragged-over")
})

dropzone.addEventListener("dragleave", handleDragLeave)

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.dropzone {
  border: 2px dashed black;
  padding: 3rem;
  display: grid;
  place-items: center;
}

.dragged-over {
  border-color: limegreen;
  background-color: lightgrey;
}

span {
  border: 1px solid blue;
}

<div class="dropzone">
  <span>Drag and drop here</span>
</div>