<div id="dragzone" class="zone">拖曳上傳</div>
.zone{
  width: 500px;
  height: 300px;
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
}
$("#dragzone").on({
  "dragover": function(event){
    event.preventDefault();
  },
  "drop": function(event){
    let file=event.originalEvent.dataTransfer.files[0];
    event.preventDefault();
    event.stopPropagation();
    console.log(file)
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js