JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <div am-dnd>
        <p>DRAG ME</p>
    </div>
    <div am-dnd>
         <h3>DRAG OVER THIS AREA</h3>

        <p>See the console, drag enter and leave are fired again and again while draging over</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quisquam, eaque, iure mollitia similique magnam voluptatem blanditiis distinctio nemo! Laboriosam porro iste maiores sequi magnam similique ad, in at. Omnis.</p>
    </div>
</div>

CSS

div[am-dnd] {
    border: 2px solid red;
}
.child-elements {
    pointer-events: none;
}

JavaScript

var app = angular.module('app', []);
app.directive('amDnd', function () {
    return {
        scope: true,
        link: function (scope, element, attrs) {
            element.attr('draggable', 'true');

            element.on('dragenter', function () {
                element.children().addClass("child-elements");
                console.log('dragEnter');
            });
            element.on('dragleave', function () {
                element.children().removeClass("child-elements");
                console.log('dragleave');
            });

        }
    };
});