0

ondragEnterイベントをトリガーして画面の下部にペインを開く領域として機能するdivがあります。HTML5のドラッグ可能なオブジェクトをこのdnd-containerにドラッグすると、下部のペインが開きます。問題は、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; 
}

ありがとう！

4

1 に答える 1

1

dnd-containerを削除し、dragstartイベントの下部にドロップゾーンペインを表示して、イベントで非表示にすることをお勧めしますdragend。

イベントはdragend、ペインにドロップした場合、ドロップできない場所にドロップした場合、またはドラッグ中にエスケープキーを押した場合でもトリガーされます。

次に、ドロップゾーンペインでdropイベントを処理します。

于 2013-02-14T02:28:58.437 に答える