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

你可以只使用addEventListneron 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 回答