File-drop hover as gmail

advertisements

I have the following 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>

To have the drop_window change color on hover, I can do:

.drop_window:hover {
    background: #F5FFF5;
}

However, if I try and drag a file into that drop_window, it does not change color. How would I make it do so, similar to Gmail's file-drop functionality?

Here is an example of what I currently have: http://jsfiddle.net/5MjGS/


You can use just addEventListner on dragenter, And then you can adjust the style. Make sure to change the color back on dragexit so for example:

So if you want it just on the div try:

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';
};

--Edit

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