자식 요소를 끌 때 부모 요소 화재의 'drag 이탈'

자식 요소를 끌 때 부모 요소 화재의 'drag 이탈'

개요

저는 아래의 HTML 구조를 가지고 있으며 첨부하였습니다.dragenter그리고.dragleave에 대한 행사.<div id="dropzone">요소.

<div id="dropzone">
    <div id="dropzone-content">
        <div id="drag-n-drop">
            <div class="text">this is some text</div>
            <div class="text">this is a container with text and images</div>
        </div>
    </div>
</div>

문제

파일을 끌 때<div id="dropzone">,그dragenter이벤트가 예상대로 실행됩니다.그러나 마우스를 하위 요소 위로 이동하면 다음과 같이<div id="drag-n-drop">,그dragenter이벤트는 다음을 위해 해고됩니다.<div id="drag-n-drop">원소와 그 다음에dragleave이벤트는 다음을 위해 해고됩니다.<div id="dropzone">요소.

만약 내가 그 위를 맴돌면.<div id="dropzone">다시 원소, 그dragenter이벤트는 다시 발사된다, 멋지지만, 그 다음에.dragleave이벤트는 바로 왼쪽에 있는 자식 요소에 대해 발사됩니다. 그래서removeClass명령이 실행됩니다. 이것은 쿨하지 않습니다.

이러한 동작은 두 가지 이유로 문제가 됩니다.

1. 저는 단지 첨부할 뿐입니다.dragenter&dragleave에게<div id="dropzone">그런데 왜 어린이 요소에도 이런 이벤트가 붙어 있는지 이해가 안 됩니다.

2. 아직도 시간을 끄는 중입니다.<div id="dropzone">아이들 위를 맴돌면서 내가 원하지 않는 요소.dragleave발포!

jsFiddle

다음은 수정할 jsFiddle입니다: http://jsfiddle.net/yYF3S/2/

질문.

그럼... 어떻게 하면 파일을 끌고 갈 때<div id="dropzone">요소,dragleave내가 아이들 요소를 끌고 가도 발사되지 않아요내가 떠날 때만 불이 날 겁니다<div id="dropzone">요소...요소의 경계 내 어디에서나 맴돌거나 dragging하면 안 됩니다.dragleave이벤트성의

적어도 HTML5 드래그 앤 드롭을 지원하는 브라우저에서는 크로스 브라우저 호환이 필요하므로 이 답변은 적합하지 않습니다.

Google과 Dropbox가 이를 파악한 것 같은데 소스 코드가 최소화/복잡하여 구현 시 이를 파악하지 못했습니다.

이벤트를 하위 요소에 바인딩할 필요가 없는 경우 언제든지 포인터 이벤트 속성을 사용할 수 있습니다.

.child-elements {
  pointer-events: none;
}

저는 마침내 제가 만족하는 해결책을 찾았습니다.실제로 제가 원하는 것을 할 수 있는 몇 가지 방법을 찾았지만 현재 해결책만큼 성공적인 방법은 없었습니다.하나의 해결책으로, 나는 경계를 추가/제거한 결과로 자주 깜박이는 것을 경험했습니다.#dropzone요소...또 다른 예에서는 브라우저에서 떨어져 있어도 테두리가 제거되지 않았습니다.

어쨌든, 내 최고의 해킹 솔루션은 이것입니다.

var dragging = 0;

attachEvent(window, 'dragenter', function(event) {

    dragging++;
    $(dropzone).addClass('drag-n-drop-hover');

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

attachEvent(window, 'dragover', function(event) {

    $(dropzone).addClass('drag-n-drop-hover');

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

attachEvent(window, 'dragleave', function(event) {

    dragging--;
    if (dragging === 0) {
        $(dropzone).removeClass('drag-n-drop-hover');
    }

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

이것은 꽤 잘 작동하지만 Firefox가 이중 호출되었기 때문에 Firefox에서 문제가 발생했습니다.dragenter그래서 내 카운터가 꺼져있었습니다.하지만 그렇다고 아주 우아한 해결책은 아닙니다.

그 때 우연히 이런 질문을 받았습니다.창 밖으로 드래그할 때 Firefox에서 드래그 탈퇴 이벤트를 감지하는 방법

그래서 저는 그 답을 받아 제 상황에 적용시켰습니다.

$.fn.dndhover = function(options) {

    return this.each(function() {

        var self = $(this);
        var collection = $();

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

        self.on('dragleave', function(event) {
            /*
             * Firefox 3.6 fires the dragleave event on the previous element
             * before firing dragenter on the next one so we introduce a delay
             */
            setTimeout(function() {
                collection = collection.not(event.target);
                if (collection.size() === 0) {
                    self.trigger('dndHoverEnd');
                }
            }, 1);
        });
    });
};

$('#dropzone').dndhover().on({
    'dndHoverStart': function(event) {

        $('#dropzone').addClass('drag-n-drop-hover');

        event.stopPropagation();
        event.preventDefault();
        return false;
    },
    'dndHoverEnd': function(event) {

        $('#dropzone').removeClass('drag-n-drop-hover');

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

깨끗하고 우아하며 지금까지 테스트한 모든 브라우저에서 작동하는 것 같습니다(IE는 아직 테스트하지 않았습니다).

이건 좀 못생겼지만 작동이 안돼요!

' dragenter' 핸들러에서 event.target을 저장하고(폐쇄 내부의 변수나 기타 다른 변수에), ' dragleave' 핸들러에서는 event.target === 저장한 코드만 실행합니다.

원하지 않을 때(즉, 하위 요소를 떠난 후 진입할 때) '드래거'가 발사되는 경우, 마우스가 상위 요소를 떠나기 전 마지막으로 발사될 때는 상위 요소에 있습니다. 따라서 상위 요소는 항상 의도된 '드래거' 이전에 최종 '드래거'가 됩니다.

(function () {

    var droppable = $('#droppable'),
        lastenter;

    droppable.on("dragenter", function (event) {
        lastenter = event.target;
        droppable.addClass("drag-over");            
    });

    droppable.on("dragleave", function (event) {
        if (lastenter === event.target) {
            droppable.removeClass("drag-over");
        }
    });

}());

처음에, 나는 사람들이 그것을 버리는 것에 동의했습니다.pointer-events: none접근.하지만 나는 내 자신에게 이렇게 물었습니다.

드래그가 진행되는 동안 하위 요소에서 작동하려면 포인터 이벤트가 정말 필요합니까?

제 경우에는 아이들에게 많은 일들이 일어나고 있습니다. 예를 들어, 추가 작업을 위한 버튼을 보여주기 위해 맴돌고, 인라인 편집 등이 있습니다.그러나 드래그 중에는 그 어떤 것도 필요하지 않거나 실제로는 원하지 않습니다.

제 경우에는 다음과 같이 부모 컨테이너의 모든 자식 노드에 대해 포인터 이벤트를 선택적으로 끕니다.

  div.drag-target-parent-container.dragging-in-progress * {
    pointer-events: none;
  }

선호하는 접근 방식을 사용하여 클래스를 추가/제거dragging-in-progress에서dragEnter/dragLeave이벤트 핸들러, 에서 했던 것 또는 같은 작업dragStart, 등의

크롬 버그인 것 같습니다.

제가 생각할 수 있는 유일한 해결책은 이벤트를 캡처할 투명 오버레이 요소를 만드는 것이었습니다. http://jsfiddle.net/yYF3S/10/

JS:

$(document).ready(function() {
    var dropzone = $('#overlay');

    dropzone.on('dragenter', function(event) {
        $('#dropzone-highlight').addClass('dnd-hover');
    });

    dropzone.on('dragleave', function(event) {
        $('#dropzone-highlight').removeClass('dnd-hover');
    });

});​

HTML:

<div id="dropzone-highlight">
    <div id="overlay"></div>

    <div id="dropzone" class="zone">
        <div id="drag-n-drop">
            <div class="text1">this is some text</div>
            <div class="text2">this is a container with text and images</div>
        </div>
    </div>
</div>

<h2 draggable="true">Drag me</h2>
​

문제는 드롭존 안에 있는 여러분의 요소들이 물론 드롭존의 일부이고 여러분이 아이들에게 들어가면 부모를 떠난다는 것입니다.이것을 해결하는 것은 쉽지 않습니다.자녀에게 이벤트를 추가할 수도 있고 부모에게 클래스를 다시 추가할 수도 있습니다.

$("#dropzone,#dropzone *").on('dragenter', function(event) {

    // add a class to #dropzone

    event.stopPropagation(); // might not be necessary
    event.preventDefault();
    return false;
});

이벤트는 여전히 여러 번 발생하지만 아무도 볼 수 없습니다.

//Edit: 드래그 이동 이벤트를 사용하여 드래그 탈퇴 이벤트를 영구적으로 덮어씁니다.

$("#dropzone,#dropzone *").on('dragenter dragover', function(event) {

    // add a class to #dropzone

    event.stopPropagation(); // might not be necessary
    event.preventDefault();
    return false;
});

드롭존에 대해서만 드래그리브 이벤트를 정의합니다.

이 답변에서 언급된 benr와 같이 이벤트에 대한 하위 노드의 실행을 방지할 수 있지만 일부 이벤트를 바인딩해야 하는 경우 다음 작업을 수행합니다.

#dropzone.dragover *{
   pointer-events: none;
}

그리고 이것을 당신의 JS 코드에 추가합니다.

$("#dropzone").on("dragover", function (event) {
   $("#dropzone").addClass("dragover");
});

$("#dropzone").on("dragleave", function (event) {
   $("#dropzone").removeClass("dragover");
});

나의 2센트:드롭존 위에 레이어를 숨긴 다음 드래그 엔터를 할 때 레이어를 표시하고 드래그 레프트를 대상으로 합니다.

데모 : https://jsfiddle.net/t6q4shat/

HTML

<div class="drop-zone">
  <h2 class="drop-here">Drop here</h2>
  <h2 class="drop-now">Drop now!</h2>
  <p>Or <a href="#">browse a file</a></p>
  <div class="drop-layer"></div>
</div>

CSS

.drop-zone{
  padding:50px;
  border:2px dashed #999;
  text-align:center;
  position:relative;
}
.drop-layer{
  display:none;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:5;
}
.drop-now{
  display:none;
}

JS

$('.drop-zone').on('dragenter', function(e){
    $('.drop-here').css('display','none');
    $('.drop-now').css('display','block');
    $(this).find('.drop-layer').css('display','block');
    return false;
});

$('.drop-layer').on('dragleave', function(e){
    $('.drop-here').css('display','block');
    $('.drop-now').css('display','none');
    $(this).css('display','none');
    return false;
});

만약 당신이 jQuery를 사용한다면, 이것을 확인해보세요: https://github.com/dancork/jquery.event.dragout

정말 끝내줍니다.

실제 드래그리브 기능을 처리하기 위해 생성된 특수 이벤트입니다.

HTML5 dragleave 이벤트는 마우스 아웃과 더 유사하게 작동합니다.이 플러그인은 마우스를 끄는 동안 마우스 리프 스타일 기능을 복제하기 위해 만들어졌습니다.

사용 예:

$('#myelement').on('드래그아웃', 함수(이벤트){ // YOUR CODE });

편집: 사실 jQuery에 의존하는 것은 아닌 것 같아요, 아마 코드가 없어도 그냥 사용할 수 있을 거예요.

jquery가 아닌 javascript라서 미안하지만, 나에게는 그것이 가장 논리적으로 해결할 수 있는 방법입니다.브라우저는 드롭 엔터 전에 (새로운 요소의) 드롭 레프트를 호출해야 합니다. 첫 번째 요소를 떠나기 전에는 다른 요소로 들어갈 수 없는 무언가가 있기 때문에, 왜 그렇게 했는지 이해할 수 없습니다! 따라서 드롭 레프트를 다음과 같이 지연시키기만 하면 됩니다.

function mydropleave(e)
{
    e.preventDefault();
    e.stopPropagation();

    setTimeout(function(e){ //the things you want to do },1);
}

그리고 드롭아웃은 드롭아웃 후에 발생할 것입니다. 그게 다입니다!

@hristo 저는 훨씬 더 우아한 해결책을 가지고 있습니다.그것이 당신이 사용할 수 있는 것인지 확인해 보세요.

당신의 노력은 결국 헛되지 않았습니다.저는 처음에 당신의 것을 사용할 수 있었지만, FF, Chrome에서 다른 문제가 있었습니다.그렇게 많은 시간을 보낸 후에 저는 그 제안이 의도한 대로 정확히 들어맞았습니다.

구현 방법은 다음과 같습니다.또한 사용자에게 드롭 존에 대해 올바르게 안내하기 위해 시각적 단서를 활용했습니다.

$(document).on('dragstart dragenter dragover', function(event) {    
    // Only file drag-n-drops allowed, http://jsfiddle.net/guYWx/16/
    if ($.inArray('Files', event.originalEvent.dataTransfer.types) > -1) {
        // Needed to allow effectAllowed, dropEffect to take effect
        event.stopPropagation();
        // Needed to allow effectAllowed, dropEffect to take effect
        event.preventDefault();

        $('.dropzone').addClass('dropzone-hilight').show();     // Hilight the drop zone
        dropZoneVisible= true;

        // http://www.html5rocks.com/en/tutorials/dnd/basics/
        // http://api.jquery.com/category/events/event-object/
        event.originalEvent.dataTransfer.effectAllowed= 'none';
        event.originalEvent.dataTransfer.dropEffect= 'none';

         // .dropzone .message
        if($(event.target).hasClass('dropzone') || $(event.target).hasClass('message')) {
            event.originalEvent.dataTransfer.effectAllowed= 'copyMove';
            event.originalEvent.dataTransfer.dropEffect= 'move';
        } 
    }
}).on('drop dragleave dragend', function (event) {  
    dropZoneVisible= false;

    clearTimeout(dropZoneTimer);
    dropZoneTimer= setTimeout( function(){
        if( !dropZoneVisible ) {
            $('.dropzone').hide().removeClass('dropzone-hilight'); 
        }
    }, dropZoneHideDelay); // dropZoneHideDelay= 70, but anything above 50 is better
});

내 버전:

$(".dropzone").bind("dragover", function(e){
    console.log('dragover');
});

$(".dropzone").bind("dragleave", function(e) {
  var stopDrag = false;
  if (!e.relatedTarget) stopDrag = true;
  else {
    var parentDrop = $(e.relatedTarget).parents('.dropzone');
    if (e.relatedTarget != this && !parentDrop.length) stopDrag = true;
  }

  if (stopDrag) {
    console.log('dragleave');
  }
});

이 레이아웃을 사용할 수 있습니다.

<div class="dropzone">
  <div class="inner-zone">Inner-zone</div>
</div>

나는 그를 위해 많은 요소 수업을 했습니다.e.target,e.currentTarget,e.relatedTarget둘 다dragover그리고.dragleave사건.

부모님 블록을 떠날 때 보여줬습니다.dropzone)e.relatedTarget이 블록의 자식이 아니기 때문에 제가 드롭존에서 벗어났다는 것을 압니다.

그래서 저는 접근방식이pointer-events: none;잘 작동하지 않았어요그래서 제 대안은 다음과 같습니다.

    #dropzone {
        position: relative;
    }

    #dropzone(.active)::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
    }

이런 식으로는 할 수 없습니다.dragleave부모(자녀) 또는dragover아동적 요소이게 도움이 되길 바라요 :)

*사용할 때 추가하는 .active' 클래스dragenter아니면dragleave. 하지만 그런 일을 하지 않고 일한다면 그냥 수업을 빼버리세요.

저는 여기에 제시된 어떤 해결책에도 만족하지 않았습니다. 왜냐하면 저는 아이들 요소에 대한 통제력을 잃고 싶지 않기 때문입니다.

그래서 저는 다른 논리 접근법을 사용했습니다. jQuery-draghandler라는 jQuery 플러그인으로 번역했습니다.DOM을 절대 조작하지 않아 높은 성능을 보장합니다.사용법은 간단합니다.

$(document).ready(function() {

    $(selector).draghandler({
        onDragEnter: function() {
            // $(this).doSomething();
        },
        onDragLeave: function() {
            // $(this).doSomethingElse();
        }
    });

});

DOM 기능을 손상시키지 않으면서 문제를 완벽하게 처리합니다.

Git 저장소에서 다운로드, 세부 정보 및 설명.

이를 위한 초간단 빠른 수정, 광범위하게 테스트되지는 않았지만 현재 크롬에서 작동합니다.

커피 대본을 실례합니다.

  dragEndTimer = no

  document.addEventListener 'dragover', (event) ->
    clearTimeout dragEndTimer
    $('body').addClass 'dragging'
    event.preventDefault()
    return no

  document.addEventListener 'dragenter', (event) ->
    $('section').scrollTop(0)
    clearTimeout dragEndTimer
    $('body').addClass 'dragging'

  document.addEventListener 'dragleave', (event) ->
    dragEndTimer = setTimeout ->
      $('body').removeClass 'dragging'
    , 50

이것은 크롬 플리커 버그나 적어도 나에게 문제를 일으켰던 그 버그의 순열을 수정합니다.

저는 사실 https://github.com/lolmaus/jquery.dragbetter/ 에서 보는 것을 좋아하지만 가능한 대안을 공유하고 싶었습니다.저의 일반적인 전략은 드랙이 드롭존에 들어갈 때(아이들이 아닌) 배경 스타일을 드롭존에 적용하는 것이었습니다(버블링을 통해).그러면 드롭 존에서 드래그할 때 스타일을 제거합니다.아이디어는 아이에게 옮길 때, 아이를 맡길 때 드롭존에서 스타일을 제거하더라도(드래그리브가 불을 뿜는다) 모든 아이에게 드래그 입력 시 스타일을 부모 드롭존에 다시 적용하기만 하면 된다는 것입니다.문제는 물론 드랍존에서 드랍존의 아이로 이동할 때 드랙터가 드랙휴가 전에 아이에게 발사되는 바람에 제 스타일이 어긋난다는 것입니다.제가 해결할 수 있는 방법은 타이머를 사용하여 드래그 엔터 이벤트를 메시지 큐에 강제로 되돌려서 드래그 탈퇴 후 처리할 수 있도록 하는 것이었습니다.타이머 콜백에서 이벤트에 접속하기 위해 클로저를 사용했습니다.

$('.dropzone').on('dragenter', function(event) {
  (function (event) {
    setTimeout(function () {
      $(event.target).closest('.dropzone').addClass('highlight');
    }, 0);
  }) (event.originalEvent); 
});

이것은 크롬, 즉 파이어폭스에서 작동하는 것으로 보이며 드롭존에 있는 아이들의 수에 관계없이 작동합니다.이벤트 순서 변경을 보장하는 타임아웃에 대해서는 조금 불안하지만, 제 사용 사례에서는 꽤 잘 작동하는 것 같습니다.

이 답변은 여기서 확인할 수 있습니다.

하위 요소를 호버링할 때 HTML5 드랙리프가 실행됨

var counter = 0;

$('#drop').bind({
    dragenter: function(ev) {
        ev.preventDefault(); // needed for IE
        counter++;
        $(this).addClass('red');
    },

    dragleave: function() {
        counter--;
        if (counter === 0) { 
            $(this).removeClass('red');
        }
    }
});

여기서 가장 간단한 솔루션 중 하나인 ● ︿●

이 fiddle을 보세요 <-- 상자 안에 파일을 끌어다 놓습니다.

다음과 같은 작업을 수행할 수 있습니다.

var dropZone= document.getElementById('box');
var dropMask = document.getElementById('drop-mask');


dropZone.addEventListener('dragover', drag_over, false);
dropMask.addEventListener('dragleave', drag_leave, false);
dropMask.addEventListener('drop', drag_drop, false);

당신은 이미 여기서 무슨 일이 일어나고 있는지 알아야 합니다.
음표를 한 번 봐봐요.

저도 비슷한 문제가 있어서 이런 식으로 해결했습니다.

문제:함수 드롭(ev)은 사용자가 "드롭 존"(ul element)에서 요소를 드롭할 때 발생하지만, 불행히도 요소가 자식(li element) 중 하나에서 드롭될 때도 발생합니다.

해결책:

function drop(ev) { 
ev.preventDefault(); 
data=ev.dataTransfer.getData('Text'); 
if(ev.target=="[object HTMLLIElement]")  
{ev.target.parentNode.appendChild(document.getElementById(data));}
else{ev.target.appendChild(document.getElementById(data));} 
} 

사용자가 파일을 공간으로 끌면 상자 색이 바뀌는 파일 업로드 상자에 이를 직접 구현하려고 했습니다.

자바스크립트와 CSS가 잘 섞인 솔루션을 찾았습니다.드랍 가능한 구역이 있다고 가정해 보십시오.div아이디로#drop. 이 내용을 자바스크립트에 추가합니다.

$('#drop').on('dragenter', function() {
    $(this).addClass('dragover');
    $(this).children().addClass('inactive');
});

$('#drop').on('dragleave', function() {
    $(this).removeClass('dragover');
    $(this).children().removeClass('inactive');
});

그런 다음 CSS에 이것을 추가하여 모든 아이들이 수업을 하지 못하게 합니다..inactive:

#drop *.inactive {
    pointer-events: none;
}

따라서 사용자가 상자 위로 요소를 드래그하는 동안에는 하위 요소가 비활성화됩니다.

저는 이를 직접 구현하려고 했고, Jquery나 플러그인도 원하지 않았습니다.

저는 제게 가장 적합한 방법으로 파일 업로드를 처리하고 싶었습니다.

파일 구조:

--- /uploads {uploads 디렉토리}

--- /js/slyupload.js {jav스크립트 파일입니다.}

--- 색인을 보다

--- 올립니다.

--- style. css {조금만 스타일링..

HTML 코드:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>my Dzone Upload...</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
    <div id="uploads"></div>        
    <div class="dropzone" id="dropzone">Drop files here to upload</div>     
    <script type="text/javascript" src="js/slyupload.js"></script>      
</body>
</html>

그럼 첨부된 자바스크립트 파일:: 'js/slyupload.js' 입니다.

<!-- begin snippet:  -->

<!-- language: lang-js -->

    // JavaScript Document

    //ondragover, ondragleave...


    (function(){        

        var dropzone = document.getElementById('dropzone');
        var intv;

        function displayUploads(data){
            //console.log(data, data.length);
            var uploads = document.getElementById('uploads'),anchor,x;

            for(x=0; x < data.length; x++){

                //alert(data[x].file);
                anchor = document.createElement('a');
                anchor.href = data[x].file;
                anchor.innerText = data[x].name;

                uploads.appendChild(anchor);
            }               
        }

        function upload(files){
            //console.log(files);
            var formData = new FormData(), 
                xhr      = new XMLHttpRequest(),    //for ajax calls...
                x;                                  //for the loop..

                for(x=0;x<files.length; x++){
                    formData.append('file[]', files[x]);

                    /*//do this for every file...
                    xhr = new XMLHttpRequest();

                    //open... and send individually..
                    xhr.open('post', 'upload.php');
                    xhr.send(formData);*/
                }

                xhr.onload = function(){
                    var data = JSON.parse(this.responseText);   //whatever comes from our php..
                    //console.log(data);
                    displayUploads(data);

                    //clear the interval when upload completes... 
                    clearInterval(intv);
                }                   

                xhr.onerror = function(){
                    console.log(xhr.status);
                }

                //use this to send all together.. and disable the xhr sending above...

                //open... and send individually..
                intv = setInterval(updateProgress, 50);
                xhr.open('post', 'upload.php');
                xhr.send(formData);

                //update progress... 
                 /* */                   
        }

        function updateProgress(){
            console.log('hello');
         }          

        dropzone.ondrop = function(e){
            e.preventDefault(); //prevent the default behaviour.. of displaying images when dropped...
            this.className = 'dropzone';
            //we can now call the uploading... 
            upload(e.dataTransfer.files); //the event has a data transfer object...
        }

        dropzone.ondragover = function(){
            //console.log('hello');
            this.className = 'dropzone dragover';
            return false;
        }

        dropzone.ondragleave = function(){
            this.className = 'dropzone';
            return false;
        }           
    }(window));

CSS:

body{
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px;
}

.dropzone{
	width:300px; 
	height:300px;
	border:2px dashed #ccc;
	color:#ccc;
	line-height:300px;
	text-align:center;
}

.dropzone.dragover{
	border-color:#000;
	color:#000;
}

사용.greedy : true의 기능으로 아이에게droppable. 그런 다음 start only event가 첫 번째 레이어를 클릭했습니다.

언급URL : https://stackoverflow.com/questions/10867506/dragleave-of-parent-element-fires-when-dragging-over-children-elements