将文件拖放到区域 - 样式

Question

有一个pluploader，它有一个文件放置区，其ID为dropFilesHere;

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

如果用户将文件放在其上，我想在放置区域进行一些更改*（例如gmail文件附件）。

*例如：

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

样品：

我该怎么做？

---

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

如果初始化的运行时是html5，你可以尝试这样的事情：

// 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");
});
}

在Chrome 18和Firefox 11上进行了测试。 希望这可以提供帮助。

我意识到另一个问题就是不允许掉落在掉落区外......

Answer 2

您是否尝试过使用CSS :hover选择器？

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

此外，您可以使用$('.dropFilesHere').mouseout()和$('.dropFilesHere').mouseenter()或仅使用纯$('.dropFilesHere').hover()

为客户端附加jQuery触发器

现在最好每天使用CSS，因为它有时比JS更有效。