How to get angular4 drag-over-sorting feature?

Question

I am using ng2-dnd in angular to achieve drag-drop feature, it also allows a sortable feature.

In jqueryui, I am able to use draggable() and sortable(), and with passing the sortable element to connectToSortable as an option I am able to make a drag-over-sort feature.

https://plnkr.co/edit/17kBs9lALwbXZiw9STnP?p=preview

Jquery Code:

$(".htmlpage").sortable();

$("p").draggable({
    connectToSortable: ".htmlpage",
    helper: function() {
        var h = $(this).clone();
        h.context.innerText += (count++);
        return h;
    }
});
<div class="container">
    <div class="row">
        <div class="col-sm-6 items">
            <p>Drag</p>
        </div>
    <div class="col-sm-6 htmlpage"></div>
</div>

Angular4 with ng2-dnd:

<ul class="list-group" dnd-sortable-container [sortableData]="listOne [dropZones]="['src-dropZone']">
    <li *ngFor="let item of listOne; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i" [dragEnabled]="true" [dragData]="item">{{item}}</li>
</ul>

<div id="mydiv" class="panel-body" dnd-droppable (onDropSuccess)="dropSuccess($event)" [dropZones]="['src-dropZone']" style ='border:1px solid black'> 
    My drop zone:<br/>
    <ul class="list-group" dnd-sortable-container [sortableData]="droppedList">
        <li *ngFor="let item of droppedList; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i" [dragData]="item">{{item}}</li>
    </ul>
</div>

While the drag-drop and sort feature is working fine individually, but the drag-over-sort feature is not working together.

I would have to drop the item first on drop zone, then sort it.

How would I get the drag-over-sort feature, like in jqueryui draggable()?

Answer 1

Try with different library "angular-sortablejs"

What to install https://www.npmjs.com/package/angular-sortablejs

Some Example https://smnbbrv.github.io/angular-sortablejs-demo/sortable-array

Source Code https://github.com/sortablejs/angular-sortablejs