<div class="container">
  <div id="dustbin">垃圾箱</div>
  <div class="dragbox">
    <div class="draglist" title="拖拽我" draggable="true">列表1</div>
    <div class="draglist" title="拖拽我" draggable="true">列表2</div>
    <div class="draglist" title="拖拽我" draggable="true">列表3</div>
    <div class="draglist" title="拖拽我" draggable="true">列表4</div>
    <div class="draglist" title="拖拽我" draggable="true">列表5</div>
    <div class="draglist" title="拖拽我" draggable="true">列表6</div>
  </div>
</div>
<div id="dragremind"></div>
.container {
  display: flex;
}
#dustbin {
  width: 100px;
  height: 250px;
  line-height: 2.7;
  letter-spacing: .5em;
  background-color: gray;
  writing-mode: vertical-lr;
  font-size: 36px;
  text-align: center;
  text-shadow: -1px -1px #bbb;
}
.dragbox {
  width: 300px;
  padding-left: 20px;
}
.draglist {
  padding: 10px;
  margin-bottom: 5px;
  border: 2px dashed #ccc;
  background-color: #eee;
  cursor: move;
}
.draglist:hover {
  border-color: #cad5eb;
  background-color: #f0f3f9;
}
#dragremind {
  padding-top: 2em;
}
let eleDrag = null;
document.querySelectorAll('.draglist').forEach(v => {
  v.ondragstart = function(ev) {
    eleDrag = ev.target;
  };
  v.ondragend = function(ev) {
    eleDrag = null;
  };
});
dustbin.ondragover = function(ev) {
  ev.preventDefault();
};
dustbin.ondragenter = function(ev) {
  this.style.color = 'maroon';
};
dustbin.ondrop = function(ev) {
  if (eleDrag) {
    dragremind.innerHTML = `<mark>${eleDrag.innerHTML}</mark>被扔进了垃圾箱`;
    eleDrag.parentNode.removeChild(eleDrag);
  }
  this.style.color = '';
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.