8

私は次のhtmlを持っています:

<div class="drop_window">
    <input class="drop_target" type="file" class="crop locale" size="800" />
    <div class="file_name">{{ video.original_file_name }}</div>
</div>

ホバー時に drop_window の色を変更するには、次のようにします。

.drop_window:hover {
    background: #F5FFF5;
}

ただし、その drop_window にファイルをドラッグしようとすると、色が変わりません。Gmail のファイル ドロップ機能と同様に、どのようにすればよいでしょうか?

これが私が現在持っているものの例です: http://jsfiddle.net/5MjGS/

4

3 に答える 3

8

そのまま使えaddEventListnerてdragenter、スタイルを調整できます。dragexitたとえば、次のように色を元に戻してください。

divしたがって、試してみたい場合は、次のようにします。

var drop = document.getElementById("layout");
drop.addEventListener("dragenter", change, false);
drop.addEventListener("dragleave",change_back,false);

function change() {
  drop.style.backgroundColor = '#EFF2AA';
};

function change_back() {
  drop.style.backgroundColor = 'transparent';
};

- 編集

jsfiddle: http://jsfiddle.net/zFbfE/1/

于 2013-01-14T21:23:27.640 に答える
4

@enginefree が言うように、アップロード コンテナーの CSS スタイルを変更するには、イベントを追加する必要があります。

唯一のことは、dragoverイベントではなくイベントを使用する必要があるということですdragenter。

var drop = document.getElementById("layout");
drop.addEventListener("dragover", change, false);
drop.addEventListener("dragleave",change_back, false);
drop.addEventListener("drop", change_back, false);

function change() {
  drop.style.backgroundColor = '#EFF2AA';
};

function change_back() {
  drop.style.backgroundColor = 'transparent';
};

これはdragenter、入力コントロールまたはアップロード コンテナー内の他の div にカーソルを合わせると、 が機能しないためです。dragoverコントロールの上にカーソルを置くと、イベントが発生します。dragleaveイベントでスタイリングを再度削除するだけです。

于 2014-08-19T13:20:16.600 に答える
1

ドラッグ アンド ドロップでファイルをアップロードするプラグインは数多くあります。

ファイルのように見えますが、必ずしも要素ではなく、ウィンドウでのホバー/マウスオーバーです。

このチュートリアルhttp://www.inserthtml.com/2012/08/file-uploader/は、私が作成したサイトに AJAX ファイルのアップロードを実装するために従ったものです。ここにデモがあります: http://www.inserthtml.com/demo/file-upload/

このjQueryイベントハンドラーを使用して、ドラッグされたファイルの入力をターゲットにしているようです。

$('#drop-files').bind('dragenter', function() {
    $(this).css({'box-shadow' : 'inset 0px 0px 20px rgba(0, 0, 0, 0.1)', 'border' : '4px dashed #bb2b2b'});
    return false;
});

したがって、探しているイベント ハンドラーは dragenter です。

于 2013-01-14T20:47:32.550 に答える