title: Change order of list items using drag and drop
body: <p>I have used the following html and ts for drag and drop list items from one div to another div.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="listArea"&gt;
     &lt;h4&gt; Drag and Drop list in Green Area: &lt;/h4&gt;
     &lt;ul class="unstyle"&gt;
        &lt;li id="drag1" draggable="true" (dragstart)="drag($event)"&gt;
            i am list 1
        &lt;/li&gt;
        &lt;li id="drag2" draggable="true" (dragstart)="drag($event)"&gt;
            i am list 2 
        &lt;/li&gt;
        &lt;li id="drag3" draggable="true" (dragstart)="drag($event)"&gt;
            i am list 3
        &lt;/li&gt;
        &lt;li id="drag4" draggable="true" (dragstart)="drag($event)"&gt;
            i am list 4
        &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="buildArea" id="div1" (drop)="drop($event)" (dragover)="allowDrop($event)"&gt;
     &lt;h4&gt; Drop Here &lt;/h4&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>And Typescript contains the following:</p>
  
  <pre><code>  allowDrop(ev) {
      ev.preventDefault();
    }
  
    drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
    }
  
    drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data).cloneNode(true));
    }
  </code></pre>
  
  <p>Its from Html5 drag and drop, and i am able to drag and drop the list items from the div with class listArea to the div with class buildArea.</p>
  
  <p>After dropped the list items user may change the order of the list items that was dropped in buildArea div.</p>
  
  <p>For eg, the given order I am list 1,2,3,4,5 may change to any order like 2,4,5,3,1 or anything user wants.</p>
  
  <p>As of now i have used only angular and typescript and no third party plugin was added and i am also need the result <strong>without any third party or jquery.</strong></p>
  
  <p>I have also have look around for this but unable to get a correct solution and hence kindly help me to achieve the change of order in dropped list.</p>
  
  <p>The <strong>stackblitz</strong> link was, <a href="https://stackblitz.com/edit/angular-wyimor" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-wyimor</a></p>