drop file into area - styleing

Question

There is a pluploader, it has a file drop zone and its id is dropFilesHere ;

var uploader = new plupload.Uploader({
        drop_element : "dropFilesHere", 
        /*...*/
    });

I would like to make some changes* (like gmail file attachment) on the drop zone if the user holds the file over it.

*For example:

.mouse_over{
    border-width:5px border-style:dashed #808080;
}

Sample:

How can I do this?

---

uploader.bind('Init', function(up, params) {
    $('#filelist').html("<div>Current runtime: " + params.runtime + "</div>");
    if(params.runtime === 'html5') {
        $('#dropFilesHere').on({
            "dragenter": function(){
                $(this).addClass('mouse_over');
            },
            "dragleave drop": function(){
                $(this).removeClass('mouse_over');
            }
        });
    }
});

Answer 1

Provided the initialized runtime is html5, you can try something like this :

// the runtime has been initialized :
var uploader = $(item).pluploadQueue();

if(uploader.runtime === 'html5') {
$('li.plupload_droptext').bind('dragenter', function() {
    $(this).css("border", "5px dashed #000000");
});

$('li.plupload_droptext').bind('dragleave', function() {
    $(this).css("border", "0px none");
});
}

tested on Chrome 18 and Firefox 11. Hope this can help.

I realize another issue is then to disallow dropping outside of the drop-zone...

Answer 2

Have you tried using CSS :hover selector?

.dropFilesHere:hover {
    border-width:5px border-style:dashed #808080;
}

Also you can attach jQuery triggers for the client using $('.dropFilesHere').mouseout() and $('.dropFilesHere').mouseenter() or just the pure $('.dropFilesHere').hover()

It is always better to use CSS now a days anyway as it is more efficient than JS sometimes.