Как получить функцию перетаскивания angular4?

Question

Как получить функцию перетаскивания angular4?

Я использую ng2-dnd в угловых для достижения функции перетаскивания, он также позволяет сортируемую функцию.

В jqueryui я могу использовать draggable() и sortable(), и с передачей сортируемого элемента в connectToSortable В качестве опции я могу сделать функцию перетаскивания.

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

Код Jquery:

$(".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 с 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>

Хотя функция перетаскивания и сортировки работает по отдельности, но функция перетаскивания не работает вместе.