1

と呼ばれるdivにドロップしたいだけのimgがあり#div1ます。div をドラッグすると、コンテナーの ID を取得したいのですが、これは 1 つだけではなく、多くのアラートを生成しています....

 <img id="drag1" 
      src="http://www.vectortemplates.com/raster/batman-logo-big.gif" 
      draggable="true" 
      ondragstart="drag(event, this)" 
      width="336" 
      height="69"/>

  <div id="div1"
       ondrop="drop(event)"  
       ondragenter="allowDrop(event, this)">
  </div>

JS:

function allowDrop(ev, obj)
{
    alert(obj.id);
}

では、なぜ私はたくさんのアラートを受け取っているのでしょうか???

デモを参照してください: http://jsfiddle.net/PbjJv/

4

2 に答える 2

1

説明

ondragoverイベントは、カーソルが上で移動したすべてのピクセルdivで発生します。マウスボタンを離しondragleaveたときに発生するイベントを使用してみてください。

解決

div でイベントを使用ondragleaveします。

HTML

 <div id="div1"  ondragleave="allowDrop(event, this)"></div>

JSFiddle

于 2013-06-12T15:04:00.750 に答える
0

この受け入れられた答えは正しくありません。

MDN から:

ドロップ イベントは、要素またはテキストの選択範囲が有効なドロップ ターゲットにドロップされると発生します。

と：

dragleave イベントは、ドラッグされた要素またはテキスト選択が有効なドロップ ターゲットを離れたときに発生します。

イベントが発生したときに allowDrop() を呼び出すondragleaveと、ドラッグがその要素を離れた後に DIV にドロップできます。ondrop問題の要素は、ユーザーがマウス ボタンを放したときに最終イベントを受け取りません。

質問は編集されたようですが、現時点では問題ないようです。OPs の質問で参照されている jsfiddle は、 div1 の代わりに使用するため、これを示唆していondragoverます。ondragenter

于 2013-07-12T15:35:58.517 に答える