0

デスクトップからファイルをドロップできる div を作成していますが、クリックしてアップロードすることもできます。セキュリティ上の制限 (ファイル入力のクリックをトリガーできない) のため、不透明度 0 のファイル入力を移動するトリックを行っています。マウスがターゲット div にある間、マウスをたどります。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.offsetXevent.offsetYChrome では利用できますが、Firefox では利用できません (これらの値は を返します) 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 に答える