拖动外部图像时，在拖放区域（文件输入）中添加类

Question

当我在拖放区域上拖动元素时，如何使用Jquery添加类。

这是我的HTML

<div class="upload">
   <form action="">
      <input class="uploadfile" type="file" id="imageLoader" name="imageLoader">
      <div class="circle"><i class="flaticon-arrows-1"></i></div>
      <div class="text">Drag and Drop or browse from you computer</div>
   </form>
</div> 

我想在上传div类中添加类似

的类

<div class="upload dragging"></div>

Answer 1

您可以通过“收听”事件dragover

来使用javascript执行此操作

var upload = document.querySelector('.upload');

upload.addEventListener("dragover", function( event ) {
  this.classList.add('dragging');
}, false);

upload.addEventListener("drop", function( event ) {
  this.classList.remove('dragging');
}, false);

.dragging {
  border:1px solid green;  
}

<div class="upload">
  <form action="">
    <input class="uploadfile" type="file" id="imageLoader" name="imageLoader">
    <div class="circle"><i class="flaticon-arrows-1"></i></div>
    <div class="text">Drag and Drop or browse from you computer</div>
  </form>
</div>