Question

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

代码段：

application.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事件。

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

1 个答案: