5

ドラッグして入力すると<div class="upload-cont">、境界線とテキストの色がグレーから黒に完全に<span class="add-text">変わり、それがグレーになると元に戻ります。

CSS:

.upload-cont{
    cursor:pointer;
    margin-left:130px;
    display:inline-block;
    border:2px dashed #a8a8a8;
    max-width:220px;
    max-height:180px;
    min-width:220px;
    min-height:180px;
    position:relative;
    border-radius:3px;
}
.add-text{
    display:block;
    font-size:10px;
    font-weight:bold;
    color:#999;
    word-wrap:break-word;
    text-align:center;
    width:100px;
    top:37%;
    left:25%;
    position:absolute;
}
.add-text:hover{ color:black; }

HTML:

<div class="upload-cont">
    <span class="add-text">
        Click to add or<br/>
        Drag and drop image here
    </span>
</div>

Jクエリ:

$(document).ready(function () {
    $(".upload-cont,.add-text").on('dragenter', function (e) {
        $(".upload-cont").css({
            "border": "2px dashed black"
        });
        $(".add-text").css({
            "color": "black"
        });
    });
    $(".upload-cont").on('dragleave', function (e) {
        $(".upload-cont").css("border", "2px dashed #a8a8a8");
        $(".add-text").css({
            "color": "#a8a8a8"
        });
    });
});

入力時に境界線とテキストの色を黒のままにするにはどうすればよいですか<span class="add-text">

この jsfiddle を確認してください: http://jsfiddle.net/rpABs/

前もって感謝します

4

3 に答える 3

9

子要素を入力すると発火するのでdragover代わりに使用dragenterdragleave

$(".upload-cont,.add-text").on('dragover', function (e) {
    $(".upload-cont").css({
        "border": "2px dashed black"
    });
    $(".add-text").css({
        "color": "black"
    });
});
$(".upload-cont").on('dragleave', function (e) {
    $(".upload-cont").css("border", "2px dashed #a8a8a8");
    $(".add-text").css({
        "color": "#a8a8a8"
    });
});

デモ

于 2013-01-13T06:10:20.150 に答える
2

ドラッグしている間、dragoverイベントは絶えず発生するので、私はそのソリューションのファンではありません。私はDragsterenterと呼ばれる小さなライブラリを作成しました。これにより、より良いleaveイベントが得られます。

于 2013-11-14T09:46:36.000 に答える