javascript - 将文件放入区域 - 样式

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()或仅使用纯的客户端附加 jQuery 触发器$('.dropFilesHere').hover()

无论如何，现在使用 CSS 总是更好，因为它有时比 JS 更有效。