文件悬停像gmail

File-drop hover like gmail

本文关键字：gmail 悬停 文件      更新时间：2023-09-26

我有以下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/

你可以在dragenter上只使用addEventListner，然后你可以调整样式。确保在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/

就像@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';
};

这是因为如果您将鼠标悬停在输入控件或上传容器内的其他div上，dragenter将不起作用。如果您将鼠标悬停在任何控件上，事件dragover将触发。您只需要使用dragleave事件再次删除样式

有相当多的拖放文件上传插件。

它看起来像一个文件，它是悬停/鼠标在窗口上，不一定是在元素上。

本教程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

相关文章：