Javascript 拖放文件上载在引导模式下不起作用

我目前正在为将成为文件上传器的用户界面工作。文件上载程序处于从按钮调用的模式上

我期望的行为是，当用户将文件拖到拖放区域时，文件名应显示在拖放区域中，并显示“删除”按钮

我看到的奇怪行为是，每当我给我的引导modal div一个合适的类名，比如（modal fade in），它都不起作用。但是，如果我完全省略了类名（从而使模态在没有按钮点击的情况下显示），它就可以正常工作

下面是我的代码摘要和一个codepen示例

HTML

JS

var dropZoneId=“drop zone”；
var buttonId=“单击此处”；
var mouseOverClass=“鼠标悬停”；
var dropZone=$（“#”+dropZoneId）；
var inputFile=dropZone.find（“输入”）；
var finalFiles={}；
$（函数（）{
$（'#deleteConButton'）。单击（函数（）{
$（“#delConModal”）.modal（）；
});
var ooleft=dropZone.offset（）.left；
var ooright=dropZone.outerWidth（）+ooleft；
var ootop=dropZone.offset（）.top；
var oobottom=dropZone.outerHeight（）+ootop；
document.getElementById（dropZoneId）.addEventListener（“dragover”，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
dropZone.addClass（鼠标覆盖类）；
var x=e.pageX；
var y=e.pageY；
如果（！（xooright | | yoobottom））{
inputFile.offset({
顶部：y-15，
左：x-100
});
}否则{
inputFile.offset({
前-400，
左：-400
});
}
}，对）；
如果（按钮编号！=“”）{
变量clickZone=$（“#”+buttonId）；
var oleft=clickZone.offset（）.左；
var oright=clickZone.outerWidth（）+oleft；
var otop=clickZone.offset（）.top；
var obottom=clickZone.outerHeight（）+otop；
$（“#”+buttonId）.mousemove（函数（e）{
var x=e.pageX；
var y=e.pageY；
如果（！（xoright | yobottom））{
inputFile.offset({
顶部：y-15，
左：x-160
});
}否则{
inputFile.offset({
前-400，
左：-400
});
}
});
}
document.getElementById（dropZoneId）.addEventListener（“drop”，函数（e）{
$（“#”+dropZoneId）.removeClass（mouseOverClass）；
}，对）；
inputFile.on（'change'，函数（e）{
最终文件={}；
$（'#filename'）.html（“”）；
var fileNum=this.files.length，
初始值=0，
计数器=0；
$.each（this.files，function（idx，elm）{
最终文件[idx]=elm；
});
用于（初始值；初始值“+计数器+””+此.files[初始值].name+”）；
}
});
})
功能删除行（obj）{
inputFile.val（“”）；
var jqObj=$（obj）；
var container=jqObj.closest（'div'）；
var index=container.attr（“id”）.split（“'）[1]；
容器。移除（）；
删除最终文件[索引]；
//控制台日志（最终文件）；
}

为了了解我希望它如何工作，在第一部分中，将类从“模态淡入”更改为“”

任何关于我为什么会遇到这个问题以及任何可能的修复方法的见解都将非常棒

<button type="button" class="btn btn-default" id="deleteConButton">Delete Contact
</button>
<div class="modal fade in" aria-hidden="false" id="delConModal" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div id="drop-zone">
        <div class="modal-body">
          <label for="file" id="clickHere">Choose files</label> or drop here.
          <input type="file" name="file" id="file" multiple />
          </label>
          <div id='filename'></div>
        </div>
      </div>
    </div>
  </div>
</div>

#drop-zone {
  width: 100%;
  min-height: 150px;
  border: 3px dashed rgba(0, 0, 0, .3);
  border-radius: 5px;
  font-family: Arial;
  text-align: center;
  position: relative;
  font-size: 20px;
  color: #7E7E7E;
}
#drop-zone input {
  position: absolute;
  cursor: pointer;
  left: 0px;
  top: 0px;
  opacity: 0;
}
/*Important*/

#drop-zone.mouse-over {
  border: 3px dashed rgba(0, 0, 0, .3);
  color: #7E7E7E;
}
/*If you dont want the button*/

#clickHere {
  display: inline-block;
  cursor: pointer;
  color: white;
  font-size: 17px;
  width: 150px;
  border-radius: 4px;
  background-color: #4679BD;
  padding: 10px;
}
#clickHere:hover {
  background-color: #376199;
}
#filename {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5em;
}
.file-preview {
  background: #ccc;
  border: 5px solid #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 14px;
  margin-top: 5px;
}  
.closeBtn:hover {
  color: red;
  display:inline-block;
}

var dropZoneId = "drop-zone";
var buttonId = "clickHere";
var mouseOverClass = "mouse-over";
var dropZone = $("#" + dropZoneId);
var inputFile = dropZone.find("input");
var finalFiles = {};
$(function() {

  $('#deleteConButton').click(function() {
    $("#delConModal").modal();
  });

  var ooleft = dropZone.offset().left;
  var ooright = dropZone.outerWidth() + ooleft;
  var ootop = dropZone.offset().top;
  var oobottom = dropZone.outerHeight() + ootop;

  document.getElementById(dropZoneId).addEventListener("dragover", function(e) {
    e.preventDefault();
    e.stopPropagation();
    dropZone.addClass(mouseOverClass);
    var x = e.pageX;
    var y = e.pageY;

    if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
      inputFile.offset({
        top: y - 15,
        left: x - 100
      });
    } else {
      inputFile.offset({
        top: -400,
        left: -400
      });
    }

  }, true);

  if (buttonId != "") {
    var clickZone = $("#" + buttonId);

    var oleft = clickZone.offset().left;
    var oright = clickZone.outerWidth() + oleft;
    var otop = clickZone.offset().top;
    var obottom = clickZone.outerHeight() + otop;

    $("#" + buttonId).mousemove(function(e) {
      var x = e.pageX;
      var y = e.pageY;
      if (!(x < oleft || x > oright || y < otop || y > obottom)) {
        inputFile.offset({
          top: y - 15,
          left: x - 160
        });
      } else {
        inputFile.offset({
          top: -400,
          left: -400
        });
      }
    });
  }

  document.getElementById(dropZoneId).addEventListener("drop", function(e) {
    $("#" + dropZoneId).removeClass(mouseOverClass);
  }, true);

  inputFile.on('change', function(e) {
    finalFiles = {};
    $('#filename').html("");
    var fileNum = this.files.length,
      initial = 0,
      counter = 0;

    $.each(this.files, function(idx, elm) {
      finalFiles[idx] = elm;
    });

    for (initial; initial < fileNum; initial++) {
      counter = counter + 1;
      $('#filename').append('<div id="file_' + initial + '"><span class="fa-stack fa-lg"><i class="fa fa-file fa-stack-1x "></i><strong class="fa-stack-1x" style="color:#FFF; font-size:12px; margin-top:2px;">' + counter + '</strong></span> ' + this.files[initial].name + '&nbsp;&nbsp;<span class="fa fa-times-circle fa-lg closeBtn" onclick="removeLine(this)" title="remove"></span></div>');
    }
  });

})

function removeLine(obj) {
  inputFile.val('');
  var jqObj = $(obj);
  var container = jqObj.closest('div');
  var index = container.attr("id").split('_')[1];
  container.remove();

  delete finalFiles[index];
  //console.log(finalFiles);
}