html5：子供がドラッグイベントを妨げるのを防ぐ方法はありますか

Question

私はhtml5のドラッグアンドドロップで少し問題があります。私はそれから簡単な道を見ていない。基本的に私は内部にいくつかの他のHTML要素といくつかの "ボックス"があります。親ボックスはドラッグ可能であり、お互いにドロップすることができます。

私は全ページのドラッグ・ドロップを処理するために、ボディにdragoverイベントをバインドします。問題は、ボックスの上にドラッグすると、イベントが子要素でトリガされることがあり、親がこのイベントをまったく取得しないことです。

これを防ぐ簡単な方法はありますか？

基本的には、マウスがターゲットボックスの領域に入ると同時にdragoverイベントを発生させます。私はこれを解決するいくつかの方法を知っていますが、実際には醜いです。私は多分単純なものがあるのだろうかと思っていました。そう

document.addEventListener('dragenter', function(e) { 

    if (e.target.className == 'candrophere') 
     // cancel out "e" to allow drop 


}, false); 

しかし、私の場合の子要素はほぼ全体の「.candrophere」ボックスを取っている：

あなたの思考のおかげで、私はコードでやっているの

ショートバージョン

電子ので：イベントは、ほぼ正しいターゲット（私はより速く、マウスを移動する場合は特に）

Answer 1

基本的に私の解決策は以下のとおりであるに解雇されることはありません.targetとe.currentTargetは、ほとんどの場合、親ボックスと一致させることができません。つまり、e.targetが親ボックスの子であるかどうかを手動で確認するだけです。それを行うには多くの方法がありますが、私はカスタム関数を使用しています。それは私自身のフレームワークに基づいているため、それをここに投稿することはできませんし、とにかくそれなしでは動作しませんが、以下のように疑似コードは次のとおりです。

// target is a framework object (much like jquery) 
closestDroppableParent = function(target) 
{ 
    // i know that all children in those boxes will not be any deeper than this 
    var max_levels = 5; 

    while (target && max_levels > 0) 
    { 
     max_levels--; 

     // droppable boxes have data-droptype attribute set so only other boxes with the same attribute 
     // can be dropped on them. This check can be done any way you like. You can have a custom class 
     // for droppable objects, check for draggable attribute etc... 
     // .data() is a framework function that returns the value of the data-* attributes 
     if (target.data('droptype')) 
      return target; 

     // .parent() is a framework function to get parent node 
     target = target.parent(); 
    } 

    return null; 
} 


// drag over event 
dragOverEventHandler = function(e) 
{ 
    // convert the element to its closest droppable parent 
      // $() is much like jquery 
    var closest = closestDroppableParent($(e.target)); 

    if (closest) 
     closest.addClass('draggedOver'); 
} 

Answer 2

CSS pointer-eventsルールは、発射からマウス操作のイベントを防ぎますそれが適用されている要素では、IEでは現在サポートされていません（http://caniuse.com/pointer-events）。

私はこの問題のために使ってきた回避策は、あなたのCSSに

.is-drag-in-progress .child-elements 
{ 
    pointer-events:none; 
} 

のようなものを追加して、あなたのonDragStartハンドラでbody要素にis-drag-in-progressクラスを追加する（とするとき、ドラッグ終了、それを削除することです）。これにより、子要素が親要素のドラッグイベントを妨害しないようになります。