HTML5：有什麼辦法來防止兒童

我有一個有點問題與HTML5拖放拖動事件的干擾。我看不到一個簡單的方法。基本上我有一些「盒子」裏面有一些其他的html元素。父框是可拖動的，它們可以相互丟棄。HTML5：有什麼辦法來防止兒童

我綁定了身體上的dragover事件來處理整個頁面上的拖放操作。問題在於，當您拖動框時 - 事件有時會觸發子元素，父項根本無法獲得此事件。

有沒有簡單的方法來防止這種情況發生？

基本上我希望dragover事件只要鼠標在目標框區域就會觸發。我知道解決這個問題的幾種方法，但他們真的很難看，我想知道是否有一些簡單的東西。

感謝您的想法

短版的我在做什麼代碼：

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

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


}, false);

但在我的情況下，子元素佔用了幾乎整個「.candrophere」框使事件幾乎從未發射了正確的目標（尤其是當我把鼠標移動速度）

來源

2012-09-20 Marius

你應該張貼的失敗，使人們可以幫你的代碼。 – Nelson

一些僞代碼更新沒有任何雜念 – Marius

我可以簡單地使用dragover事件，而不是DragEnter事件 –

基本上我的解決方案如下：

自啓用電子.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'); 
}

來源

2012-09-20 10:00:54 Marius

的CSS規則pointer-events防止點火鼠標交互事件在它應用到的元素上，但目前不支持IE（http://caniuse.com/pointer-events）。

我用這個問題的解決方法是添加類似

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

你的CSS，以及is-drag-in-progress類在onDragStart處理程序添加到body元素（並刪除它拖動結束時）。這將防止子元素干擾父元素上的拖動事件。

來源

2013-03-05 05:31:12

哇，這個偉大的工程來解決這個問題。至少在Chrome中。 – mwilcox

HTML5：有什麼辦法來防止兒童

回答

相關問題