拖放区过渡效果


本教程展示了如何将 CSS 过渡效果添加到你的拖放区,例如当用户将文件拖到页面窗口时的放大效果。

默认情况下,本插件使用整个页面作为拖放文件的区域,不过可以通过将 dropZone 设置为指定的 jQuery 对象,这样该对象对应的区域则变成有效拖放区(参见 配置项手册API 指南):

$('#fileupload').fileupload({
    dropZone: $('#dropzone')
});

拖放区可以是下面这样的 HTML 节点:

<div id="dropzone" class="fade well">Drop files here</div>

对应的 CSS 定义:

#dropzone {
    background: palegreen;
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
}
#dropzone.in {
    width: 600px;
    height: 200px;
    line-height: 200px;
    font-size: larger;
}
#dropzone.hover {
    background: lawngreen;
}
#dropzone.fade {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 1;
}

然后你只需添加以下 JavaScript 代码即可实现拖放区的 CSS 过渡效果:

$(document).bind('dragover', function (e) {
    var dropZone = $('#dropzone'),
        timeout = window.dropZoneTimeout;
    if (timeout) {
        clearTimeout(timeout);
    } else {
        dropZone.addClass('in');
    }
    var hoveredDropZone = $(e.target).closest(dropZone);
    dropZone.toggleClass('hover', hoveredDropZone.length);
    window.dropZoneTimeout = setTimeout(function () {
        window.dropZoneTimeout = null;
        dropZone.removeClass('in hover');
    }, 100);
});
注意:可以改为下面的样子实现多个拖放区
$(document).bind('dragover', function (e) {
    var dropZones = $('.dropzone'),
        timeout = window.dropZoneTimeout;
    if (timeout) {
        clearTimeout(timeout);
    } else {
        dropZones.addClass('in');
    }
    var hoveredDropZone = $(e.target).closest(dropZones);
    dropZones.not(hoveredDropZone).removeClass('hover');
    hoveredDropZone.addClass('hover');
    window.dropZoneTimeout = setTimeout(function () {
        window.dropZoneTimeout = null;
        dropZones.removeClass('in hover');
    }, 100);
});
注意: 如果你希望允许特定的拖放区但禁用文件放置到页面时浏览器的默认行为,可以添加下面 JavaScript 代码:
$(document).bind('drop dragover', function (e) {
    e.preventDefault();
});

请注意,需要同时阻止“drop”和“dragover”事件的默认操作,才能禁用浏览器默认的放置行为。