How to realize drop and dragover of H5 in angular6

li,

< div class= "testJq" >

<li *ngFor="let i of dropArr;let dataIndex=index;" draggable="true" class="dropLi">
  <span>{{i.title}}</span>
   <ul>
     <li *ngFor="let y of i.state" draggable="true" class="dropJob">{{y.name}}</li>
   </ul>
   </li>

< / div >

import {Component, OnInit} from"@ angular/core";
import * as $from "jquery"
@ Component ({
selector: "app-drop",
templateUrl:". / drop.component.html",
styleUrls: [". / drop.component.css"]
})
export class DropComponent implements OnInit {
dropArr:any= [
{"title": 1 camera statefulness: [{"name":"job11"}, {" name":"job12"}]},
{"title": 2)
{"title": 3precinct statecraft: [{"name":"job31"}, {" name":"job32"}]},
{"title": 4 name":"job41" statefulness: [{"name":"job41"}, {" name":"job42"}]},
{"title": 5precinct statecraft: [{"name":"job51"}, {" name":"job52"}]}
]
startCardIndex:number=0
overCardIndex:number=0;
constructor () {}
ngOnInit () {
}
ngAfterViewInit () {
let temp=this.dropArr;
let startCardIndex:any="";
let overCardIndex:any="";
let startCardJobIndex:any="";
let overCardJobIndex:any="";
let startJobIndex:any="";
let overJobIndex:any="";
let aaa;
let bbb;
$(".dropLi"). On ("dragstart", function (e) {

)

    startJobIndex=""
    startCardIndex=$(this).index()
    aaa=temp[startCardIndex]
    console.log("1*********")
    e.stopPropagation()
        })
  //

$(".dropLi") .on ("drop", function (e) {

)

  e.preventDefault()
  e.stopPropagation()
  console.log("2*********")
  if(startJobIndex==""){
  console.log(startJobIndex)
   temp.splice(startCardIndex,1)
   overCardIndex=$(this).index()
   temp.splice(overCardIndex,0,aaa);
   console.log("");
  }
  else{
    console.log("")
  }
console.log(888888)

})

/ / drag job

$(".dropJob").on("dragstart",function(e){
 //startCardJobIndex="";
  startCardJobIndex= $($(this).parent("ul").parent("li")).index()
 startJobIndex=$(this).index()
 console.log(startCardJobIndex,startJobIndex)
 //overJobIndex="";
 bbb=temp[startCardJobIndex].state[startJobIndex]
  e.stopPropagation()
        })
$(".dropJob").on("drop",function(e){
overCardJobIndex= $($(this).parent("ul").parent("li")).index()
 overJobIndex=$(this).index()
 if(startCardJobIndex!==overCardJobIndex){
   alert("");
   return false;
 }else{

 }
 console.log(overCardJobIndex,overJobIndex)
//console.log(($(this).index()))
//temp[]
e.stopPropagation()
e.preventDefault()

/ / overJobIndex=$ (this). Index ()

})

//

$(".dropLi") .on ("dragover", function (e) {

)

            e.preventDefault()
})
$(".dropJob").on("dragover",function(e){
            e.preventDefault()
        })

}
}