Question

我有一个包含dragenter和dragleave事件的工作示例，突出显示应删除文件的区域。此示例works correctly。

现在，如果我只是在我的dragenter区域中添加一个<span> highlighting does not work correctly了（当您将图像悬停在文本顶部时 - 突出显示消失）。如您所见，dragleave被多次调用。

我所做的更改都被Drop files here替换为<span>Drop files here</span>

此外还有淘汰代码，但我相信它与bug无关。我知道问题出在事件冒泡上，但是

   e.stopPropagation();
   e.preventDefault();
   return false;

无济于事。知道如何让它与dom元素一起工作吗？

PS 这只是一个简化的例子，它看起来我无法正确制作它（我当时认为通过JS解决它的唯一方法，它似乎我的方式描述它也可以用css解决它。抱歉这个混乱。示例看起来更像this。不仅Text位于可丢弃元素内部，而且当你放弃某些东西时，元素会出现在那里。这些元素是可点击的。

Malk解决方案的问题是:after元素保留在这些可点击元素之上，从而使它们无法点击。

Answer 1

看起来您可以将处理程序附加到位于跨度之后和之上的叠加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;
}

Answer 2

我认为Malk's answer是有效的。使用叠加层或蒙版坐落在放置区域上方，当您拖放时放置它们是孩子。这可以防止您遇到span

时遇到的问题

我用你最新的例子创建了一个有效的Fiddle。

在dragleave上冒泡事件的问题

2 个答案: