Question

我想在Bootstrap Modal中设置这个drop-zone（drag drop files into standard html file input）。但它没有用。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
  <div class="modal-content">
    <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
    <div class="modal-body">
       <div id="drop-zone">
          <span id="filename">Drop files here...</span>
          <div id="clickHere"> or click here..
          <input type="file" name="file" id="file" onChange="changeinput()" />
       </div>
    </div>
    </div>
    <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div>
</div>

$(function () {
var dropZoneId = "drop-zone";
var buttonId = "clickHere";
var mouseOverClass = "mouse-over";

var dropZone = $("#" + dropZoneId);
var ooleft = dropZone.offset().left;
console.log("left:"+ooleft);
var ooright = dropZone.outerWidth() + ooleft;
console.log("right:"+ooright);
var ootop = dropZone.offset().top;
console.log("top:"+ootop);
var oobottom = dropZone.outerHeight() + ootop;
var inputFile = dropZone.find("input");
document.getElementById(dropZoneId).addEventListener("dragover", function (e) {
  console.log("drag");
    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) {
      console.log("hover");
        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) {
  console.log("drop");
    $("#" + dropZoneId).removeClass(mouseOverClass);
}, true);
})

此处示例：https://fiddle.jshell.net/2yzk77sx/

似乎Modal中的元素返回offset（）零，这会导致问题。

有没有解决这个问题？

offset（）在Bootstrap Modal窗口中不起作用

0 个答案: