angular6中怎么实现H5的drop和dragover

Question

上面几个循环生成的li需要拖动交换位置,哪里松开时就放在哪里

<div class="testJq">
<ul>

<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>

</ul>
</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,'state':[{'name':'job11'},{'name':'job12'}]},
{"title":2,'state':[{'name':'job21'},{'name':'job22'}]},
{"title":3,'state':[{'name':'job31'},{'name':'job32'}]},
{"title":4,'state':[{'name':'job41'},{'name':'job42'}]},
{"title":5,'state':[{'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)

})

//拖动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()
        })

}
}

Answer 1

angular 没有提供drag drop的插件，使用原生的drag drop event就行了

Answer 2

拖拽排序
https://github.com/sortablejs...