HTML

设置 draggable 属性，可推拽

<div class="target"   draggable="true">合格</div>
		<div class="target" draggable="true">不合格</div>
		<div class="target" draggable="true">合格</div>
		<div class="target" draggable="true">合格</div>
		
		<div style="display: flex;">
			
			<div id="qualified">
				<h1>合格</h1>
			
			</div>
			<div id="noqualified">
			<h1>不合格</h1>
			</div>
		</div>

CSS:

<style>
			.target {
				width: 100px;
				height: 20px;
				background: #8A2BE2;
				text-align: center;
				color: #FFFFFF;
				margin: 10px 0px;
			}
			#qualified {
				width: 100px;
				height: 200px;
				background: #00fa11;
				margin: 0px 10px;
			}
			#noqualified {
				width: 100px;
				height: 200px;
				background: #850515;
				margin: 0px 10px;
			}
		</style>

JavaScript

<script>
			let target = null
			
		    let targets =  document.getElementsByClassName('target')
			
		  console.log(targets)
		    for(let i =0; i < targets.length; i++){
				targets[i].addEventListener('dragstart',function(evnt){
					console.log('dragstart:',event)
					target =  event.target
					event.dataTransfer.setData('text/plain',i)
				},false)	
			}
			
			
			document.addEventListener('drop',function(event){
				console.log('drop:',event)
				let currentDom = event.target
				console.log(currentDom.id)
				if(currentDom.id === 'qualified' || currentDom.id === 'noqualified') {
					currentDom.appendChild(target)
					console.log(event.dataTransfer.getData('text/plain'))
				} 
				// event.preventDefault();
			},false)
			

          /** 监听 dragover 事件，并且 event.preventDefault() 
           *,不然  document 监听drop将不会触发
           */
		    document.addEventListener('dragover',function(event){
				// console.log('dragover:',event)
				event.preventDefault();
			},false)
			
		</script>