HTML5拖放：当侦听“拖动”和“放置”事件时，不会调用“ dragleave”

Question

我在另一个父div中包含了div，都允许“ drop”。两种情况：

情况1：不允许放置事件：当我将元素放到子框中时，都执行dragleave事件，因此正确删除了两个元素的红色类，但未执行drop

案例2：允许drop事件（通过删除js代码中的注释）：当我在子框中放置元素时，不执行dragleave事件，并且仅在子元素上删除红色类（“ drop”事件侦听器中包含的代码）

问题：在情况2中，如果将元素放入名为div的子级中，则仅在子级div中删除红色类，而在父级div中则未删除红色类。在不通过event.path对象的情况下如何删除所有父母中的班级？

这里是案例1的Fiddler这是案例2的Fiddler

var myApp = angular.module('myApp',[]);

 myApp.controller('MyCtrl', ['$scope', function ($scope)
            {
            }]);


myApp.directive('drop', function() {
return{
 	restrict: "A",
    replace: false,

    link: function (scope, element, attrs, ctlr) {
    	var obj = element[0];
		var DragLeaveCounter=0;
        
        obj.addEventListener("dragenter", function (eventObject) {
            eventObject.preventDefault();
            DragLeaveCounter++;
            if (DragLeaveCounter === 1) {
                    obj.classList.add( 'red' );
                };
           console.log("enter" , obj.id , DragLeaveCounter );
        }, false);

        obj.addEventListener("dragleave", function (eventObject) {
            eventObject.preventDefault();
            DragLeaveCounter--;
           if (DragLeaveCounter <= 0) {
                obj.classList.remove('red');
           }
            console.log("leave" , obj.id , DragLeaveCounter);
        }, false);


        obj.addEventListener("drop", function (eventObject) {
            eventObject.preventDefault();
            eventObject.stopPropagation();
            console.log("drop" , obj.id , eventObject);           
            obj.classList.remove("red");
            DragLeaveCounter=0;

        }, false);


        obj.addEventListener("dragover", function (eventObject) {
           //TODO Remove comment in next line: 
           eventObject.preventDefault();
            console.log("dragover");
        }, false);

        
    }
    
}
});

/* Styles go here */

#parent{
    width:200px;
    height:200px;
    border:1px solid red;
    position:relative;
}

#child{
  position:absolute;
  left:50px;
  top:50px;
  width:50px;
  height:50px;
  background-color:#c7a499;
}
#child2{
  position:absolute;
  left:50px;
  top:110px;
  width:50px;
  height:50px;
  background-color:#c7a499;
}

.red {
    background-color: red !important;
}
.green {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl" >
    <i> Remove comment on line 43 in js to see what the difference (Please open the console)</i>
    <div id="drag"  draggable="true">drag me</div>
    <hr>

    <div id="parent" drop>
        Parent
        <div id="child" drop> 
            child
        </div>
        <div id="child2" > 
            child 2
        </div>
        
        </div>
</div>

Answer 1

当触发drop事件时，拖放功能的正确行为是不触发dragleave事件。如果未在event.preventDefault()事件上使用drop，则浏览器将尝试执行该放置操作（即：在将链接放入浏览器时加载链接）。这导致leave事件被触发。

更多信息：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#drop

您应该离开drop事件向上传播，以将事件收集到父对象中，从而在放置侦听器中删除该eventObject.stopPropagation();。