title: How to get angular4 drag-over-sorting feature?
body: <p>I am using <code>ng2-dnd</code> in angular to achieve drag-drop feature, it also allows a sortable feature.</p>
  
  <p>In jqueryui, I am able to use draggable() and sortable(), and with passing the sortable element to <code>connectToSortable</code> as an option I am able to make a drag-over-sort feature.</p>
  
  <p><a href="https://i.stack.imgur.com/kR4oP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kR4oP.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/OzTOc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OzTOc.png" alt="enter image description here"></a></p>
  
  <p><a href="https://plnkr.co/edit/17kBs9lALwbXZiw9STnP?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/17kBs9lALwbXZiw9STnP?p=preview</a></p>
  
  <p>Jquery Code:</p>
  
  <pre><code>$(".htmlpage").sortable();
  
  $("p").draggable({
      connectToSortable: ".htmlpage",
      helper: function() {
          var h = $(this).clone();
          h.context.innerText += (count++);
          return h;
      }
  });
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-6 items"&gt;
              &lt;p&gt;Drag&lt;/p&gt;
          &lt;/div&gt;
      &lt;div class="col-sm-6 htmlpage"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Angular4 with ng2-dnd:</p>
  
  <pre><code>&lt;ul class="list-group" dnd-sortable-container [sortableData]="listOne [dropZones]="['src-dropZone']"&gt;
      &lt;li *ngFor="let item of listOne; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i" [dragEnabled]="true" [dragData]="item"&gt;{{item}}&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="mydiv" class="panel-body" dnd-droppable (onDropSuccess)="dropSuccess($event)" [dropZones]="['src-dropZone']" style ='border:1px solid black'&gt; 
      My drop zone:&lt;br/&gt;
      &lt;ul class="list-group" dnd-sortable-container [sortableData]="droppedList"&gt;
          &lt;li *ngFor="let item of droppedList; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i" [dragData]="item"&gt;{{item}}&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>While the drag-drop and sort feature is working fine individually, but the drag-over-sort feature is not working together.
  <a href="https://i.stack.imgur.com/EFI4O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EFI4O.png" alt="enter image description here"></a></p>
  
  <p>I would have to drop the item first on drop zone, then sort it.</p>
  
  <p>How would I get the drag-over-sort feature, like in jqueryui draggable()?</p>