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

我有一个div用作触发ondragEnter事件的区域，在屏幕底部打开一个窗格。当我拖动一个HTML5可拖动对象到这个dnd-container时，它会打开底部窗格。问题是，位于dnd-container区域的可拖动元素不能被拖动，这会触发ondragEnter事件（因为ondragStart事件已经发生在dnd-container中）。我必须在dnd-container之外，才能将元素成功拖入dnd-container，这会打开显示拖放区域的底部窗格。有什么想法？也许我正在以这种错误的方式去做。如何在dragEnter上创建一个不可见的div来触发事件？

代码段：

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; 
}

谢谢！

来源

2013-02-14 Sean Montana

显示您目前的代码。 – cube 2013-02-14 00:52:50

我建议你摆脱dnd容器，并在dragstart事件的底部显示下拉窗格，并将其隐藏在dragend事件中。

如果将dragend事件放在窗格中，某处无法放下，或者即使在拖动时按下了退出键，dragend事件也会触发。

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

来源

2013-02-14 02:28:58

的确，我正在考虑以此作为替代方案。我想这是一样的好，试图用我的UX帽子思考。 – 2013-02-14 02:35:52

海事组织，这也是更好的用户体验。即使用户在浏览器外面拖动，您也会看到拖放区域窗格可见，因此用户将不会混淆向何处放置:) – 2013-02-14 02:37:30

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

回答

相关问题