TianyiLi · July 22, 2019 08:17
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .card {
      background-color: black;
      width: 158px;
      height: 216px;
    }

    .ghost {
      position: absolute;
    }

    .hidden-block {
      overflow: hidden;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      position: absolute;
    }

    .box-can-drop {
      position: absolute;
      right: 80px;
      top: 8px;
      width: 158px;
      height: 216px;
      border: solid 2px black;
    }
  </style>
 </head>

 <body>
  <div class="card" draggable="true">drag-test</div>
  <div class="card" id="card2">drag-test</div>
  <div class="card" id="card3">drag-test</div>
  <div class="box-can-drop"></div>
  <div class="hidden-block">
    <div class="ghost"></div>
  </div>
 </body>

 </html>
 <script>
  let dragged = null
  document.querySelector('.card').addEventListener('dragend', function (e) {
    e.target.style.opacity = 1
    document.querySelector('#card2').style.opacity = 1
    document.querySelector('#card3').style.opacity = 1
    document.querySelector('.ghost').style.opacity = 0
    document.querySelector('.ghost').innerHTML = ''
  })
  document.querySelector('.box-can-drop').addEventListener('dragover', function (ev) {
    // ev.dataTransfer.setData('text/plain', ev.target.id)
    ev.preventDefault()
  })
  document.querySelector('.box-can-drop').addEventListener('drop', function (e) {
    e.preventDefault()
    dragged.forEach(n => e.target.appendChild(n))
  })
  document.querySelector('.card').addEventListener('dragstart', function (e) {
    console.log(e)
    dragged = [
      e.target,
      document.querySelector('#card2'),
      document.querySelector('#card3')
    ]
    let div = document.querySelector('.ghost')
    div.style.top = e.target.offsetX
    div.style.left = e.target.offsetY
    let crt = this.cloneNode(true)
    e.target.style.opacity = 0
    div.appendChild(crt)
    div.append(document.querySelector('#card2').cloneNode(true))
    div.append(document.querySelector('#card3').cloneNode(true))
    document.querySelector('#card2').style.opacity = 0
    document.querySelector('#card3').style.opacity = 0
    div.style.opacity = "0.5"
    e.dataTransfer.setDragImage(div, e.offsetX, e.offsetY)
    console.log(div)
  })
 </script>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	.card {
	background-color: black;
	width: 158px;
	height: 216px;
	}

	.ghost {
	position: absolute;
	}

	.hidden-block {
	overflow: hidden;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	position: absolute;
	}

	.box-can-drop {
	position: absolute;
	right: 80px;
	top: 8px;
	width: 158px;
	height: 216px;
	border: solid 2px black;
	}
	</style>
	</head>

	<body>
	<div class="card" draggable="true">drag-test</div>
	<div class="card" id="card2">drag-test</div>
	<div class="card" id="card3">drag-test</div>
	<div class="box-can-drop"></div>
	<div class="hidden-block">
	<div class="ghost"></div>
	</div>
	</body>

	</html>
	<script>
	let dragged = null
	document.querySelector('.card').addEventListener('dragend', function (e) {
	e.target.style.opacity = 1
	document.querySelector('#card2').style.opacity = 1
	document.querySelector('#card3').style.opacity = 1
	document.querySelector('.ghost').style.opacity = 0
	document.querySelector('.ghost').innerHTML = ''
	})
	document.querySelector('.box-can-drop').addEventListener('dragover', function (ev) {
	// ev.dataTransfer.setData('text/plain', ev.target.id)
	ev.preventDefault()
	})
	document.querySelector('.box-can-drop').addEventListener('drop', function (e) {
	e.preventDefault()
	dragged.forEach(n => e.target.appendChild(n))
	})
	document.querySelector('.card').addEventListener('dragstart', function (e) {
	console.log(e)
	dragged = [
	e.target,
	document.querySelector('#card2'),
	document.querySelector('#card3')
	]
	let div = document.querySelector('.ghost')
	div.style.top = e.target.offsetX
	div.style.left = e.target.offsetY
	let crt = this.cloneNode(true)
	e.target.style.opacity = 0
	div.appendChild(crt)
	div.append(document.querySelector('#card2').cloneNode(true))
	div.append(document.querySelector('#card3').cloneNode(true))
	document.querySelector('#card2').style.opacity = 0
	document.querySelector('#card3').style.opacity = 0
	div.style.opacity = "0.5"
	e.dataTransfer.setDragImage(div, e.offsetX, e.offsetY)
	console.log(div)
	})
	</script>