jqwidgets-scripts-custom/demos/Angular/dragdrop/events/src/app/app.component.html

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<div class="main-container">
    <div id="draggable-parent">

        <jqxDragDrop class="draggable"
            (ondragstart)="onDragStart($event)" (ondragend)="onDragEnd($event)"
            (ondroptargetenter)="onDropTargetEnter($event)" (ondroptargetleave)="onDropTargetLeave($event)"
            [restricter]="restricter" [dropTarget]="'.drop-target'">
            <div class="label">I can be dragged only inside my parent</div>
        </jqxDragDrop>

        <div class="drop-target">
            <div class="label">I am a drop target</div>
        </div>
    </div>

    <jqxPanel [theme]="'material'" #myPanel class="events" [width]="260" [height]="330"></jqxPanel>

</div>