0

我正在创建一个 div，您可以在其中从桌面删除文件，也可以通过单击它来上传它们。由于安全限制（我无法触发对文件输入的点击），我正在使用在目标 div 上时跟随鼠标移动不透明度 0 文件输入的技巧。它在 Chrome 上完美运行，但 Firefox 没有做到这一点（因为它将文件输入粘贴到 div 的左上角。我将向您展示我正在使用的结构：

<div style="position:relative;width:500px">
    <img class="img-drop" width="500" src="http://placehold.it/500x500">
    <div class="over-img-drop" style="position:absolute;width:100%;height:100%;top:0;">
        Drop or click to upload a picture.
        <input type="file" style="position:absolute;width:20px;height:20px;opacity:0" class="fileupload">
    </div>
    <a href="#" class="btn-statusbar" style="position:absolute;top:10px;right:10px"><i class="icon-chevron-down"></i></a>
</div>

Javascript 来了

<script type="text/javascript">
    $(".over-img-drop").on("mouseover,  mousemove", function(e){
        if($(e.target).hasClass("fileupload")) //if event is happening over file input, avoid moving
            return true;
        $(this).find(".fileupload").css("top", e.offsetY-10).css("left", e.offsetX-10);
            return false;
    });
</script>
4

1 回答 1

0

好吧，我碰巧找到了解决方案：

event.offsetX并且event.offsetY在 Chrome 上可用，但在 Firefox 上不可用（这些值 return undefined）。您需要做的是手动计算偏移量并根据此计算放置任何位置：jQuery 包括此，如此处所述。

您应该做的是获取容器的偏移量，然后从 and 中减去event.pageX它event.pageY。因此，代码如下所示：

<script type="text/javascript">
    $(".over-img-drop").on("mouseover,  mousemove", function(e){
        if($(e.target).hasClass("fileupload"))
            return true;
        var offsets = $(this).offset();
        $(this).find(".fileupload").css("top", e.pageY-offsets.top-10).css("left", e.pageX-offsets.left-10);
        return false;
    });
</script>
于 2012-10-26T09:59:32.540 回答