如何创建一个不可见的 div 来触发 dragEnter 上的事件？

Question

我有一个 div，它用作触发 ondragEnter 事件以在屏幕底部打开一个窗格的区域。当我将 HTML5 可拖动对象拖入此 dnd 容器时，它将打开底部窗格。问题是，dnd-container 区域中的可拖动元素无法被拖动，这将触发 ondragEnter 事件（因为 ondragStart 事件已经在 dnd-container 内发生）。我必须在 dnd-container 之外才能成功地将元素拖到 dnd-container 中，这会打开显示拖放区的底部窗格。 有什么想法吗？也许我用错了方法。

代码片段：

应用程序.html

<div id="card-container"></div> <!--contains some objects that are draggable="true"-->
<div id="dnd-container"></div>
<div id="bp-container"></div>

layout.js

define(...{
    var AppLayout = Marionette.Layout.extend({
       template : tmpl,
       events : {
         'dragenter #dnd-container' : 'toggleBot',
       },
       toggleQB : function(){
          x.publish('toggleQB'); //just opens and closes the bottom pane
       },
   });
 return AppLayout;
});

styles.css

#dnd-container {
    position: fixed;
    right: 0px;
    bottom: 28px;
    left: 0px;
    top: 70%;
    z-index: -1;
}

#bp-container {
    width : 100%;
    height: 275px;
    margin-left:auto;
    background-color: 000000;
    margin-right:auto;
   -moz-border-radius: 0px;
   -webkit-border-radius: 7px 7px 0px 0px;
    border-radius: 7px 7px 0px 0px; 
}

谢谢！

Answer 1

我建议你去掉 dnd-container，只在 dragstart 事件的底部显示拖放区窗格，并在 dragend 事件上隐藏它。

dragend 事件将在您将其拖放到窗格中、无法拖放的地方或即使您在拖动时按下退出键时触发。

然后在您的拖放区窗格中，处理drop 事件。