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 클래스를 추가 (때 드래그 끝을 제거하는

입니다 ). 이렇게하면 하위 요소가 상위 요소의 끌기 이벤트를 방해하지 않습니다.