0

我有一个 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>

布局.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;
});

样式.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; 
}

谢谢！

4

1 回答 1

1

我建议您摆脱 dnd-container，只在dragstart事件底部显示拖放区窗格，并将其隐藏在dragend事件中。

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

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

于 2013-02-14T02:28:58.437 回答