子要素がHTML5 dragoverとdropイベントを妨害しないようにするにはどうすればいいですか？

Question

私は 'drop'と 'dragover'イベントを添付したドロップターゲットを<div>持っています。 <div>には、アンカータグ内の画像が含まれています（簡略化して：<div><a><img /></a></div>）。ターゲットの子要素は、「ドロップ」または「ドラゴーヴァー」イベントがトリガーされるのをブロックするようです。ドラッグされた要素がターゲットの上にあるが、その子要素を超えていない場合のみ、両方のイベントが期待どおりにトリガされます。

私が達成したいのは、子要素の存在にかかわらず、「dragover」イベントと「drop」イベントがターゲット<div>のどこでもトリガーされるということです。

Answer 1

あなたのコードで何か他のことが行われている必要があります。私はここで簡単な例を嘲笑：

http://jsfiddle.net/M59j6/6/

、あなたはその子要素は、イベントに干渉しない見ることができます。

Answer 2

ドロップ・アドバイス&ドロップ・スペックには深刻な欠陥があり、扱いにくいです。

子要素を追跡することで、（子要素が干渉しない）期待される動作を達成することができます。

jQuery.fn.dndhover = function(options) { 
    return this.each(function() { 
    var self = jQuery(this); 
    var collection = jQuery(); 

    self.on('dragenter', function(event) { 
     if (collection.size() === 0) { 
     self.trigger('dndHoverStart'); 
     } 

     collection = collection.add(event.target); 
    }); 

    self.on('dragleave', function(event) { 
     collection = collection.not(event.target); 

     if (collection.size() === 0) { 
     self.trigger('dndHoverEnd'); 
     } 
    }); 
    }); 
}; 

jQuery('#my-dropzone').dndhover().on({ 
    'dndHoverStart': function(event) { 
    jQuery('#my-dropzone').addClass('dnd-hover'); 

    event.stopPropagation(); 
    event.preventDefault(); 
    return false; 
    }, 
    'dndHoverEnd': function(event) { 
    jQuery('#my-dropzone').removeClass('dnd-hover'); 

    event.stopPropagation(); 
    event.preventDefault(); 
    return false; 
    } 
}); 

クレジット：以下

は（jQueryを使って）これを行う方法の簡単な例である 'dragleave' of parent element fires when dragging over children elements

Answer 3

やや元の質問に対して斜めに、私は次のことを思って、ここで私の方法をGoogleで検索：私は<div draggable="true">...</div>コンテナの子である<img />を作るにはどうすればよい

、ハンドルのWiとして正しく振る舞いますそのコンテナを動かすには？

シンプル：<img src="jake.jpg" draggable="false" />

Answer 4

あなたはすべての子供のためのCSSでのポインタのイベントを無効にすることができます。

.targetDiv * { 
    pointer-events: none; 
}