2

我正在构建另一个 Drag'n'Drop 文件上传器。我想做的是在开始拖动时突出显示页面上的放置区域，以便用户知道将文件移动到哪里。该界面不会立即使其明确，这在这种情况下是需要的......

当用户已经在它上面时突出显示 dropzone 很好，但这是用户拖动但尚未进入我希望收到通知的可放置区域的时间。

我无法使用该dragstart事件，因为它会在被拖动的 HTML 元素上触发，在这种情况下，它是来自用户桌面或其他东西的文件。我还尝试了以下方法：

$(document.body).on('dragenter', changeTheCSSClass)
                .on('dragleave', changeItBackAgain);

但是，光标所在的每个嵌套元素都会触发进入和离开事件，因此我会收到大量事件，并且类会不断地来回切换。绝对不是我想要的。

有任何想法吗？

4

2 回答 2

0

由于没有人发布任何内容，所以我发布了这个，既不稳定也不是 100% 工作，但有时工作。

changeback = 2;
changedback = true;
$(document)
    .off('dragenter dragleave')
    .on('dragenter', function (e) {
    setTimeout(function () {
        window.clearTimeout(changeback);
        changeback = 0;
        console.log('dragenter', e.target);
        if (changedback) document.getElementById('nav-askquestion').style.color = '#bc0000';
        changedback = false;
    }, 10);
})
    .on('dragleave', function (e) {
    console.log('dragleave', e.target);
    if (changeback == 0) {
        changeback = window.setTimeout(function () {
            console.log('changed back');
            document.getElementById('nav-askquestion').style.color = '#FFFFFF';
            changedback = true;
        }, 15);
    }
});

应用于此页面本身。您还需要通过设置一些标志来取消内部拖动dragstart。

名称dragenter，dragleave实际上应该是dragover，dragout看起来:)

你最后怎么样了？

于 2012-10-25T13:04:31.260 回答
0

你可以使用 angularJS：

<div align="center" class="alert alert-success ng-pristine ng-untouched ng-valid ng-empty" 
    ngf-select="onPrepareFile($file)" ngf-drop="onPrepareFile($file)" ng-model="vm.file" 
    name="inputFileStorage" 
    ngf-pattern="'image/*,application/pdf'" 
    ngf-accept="'image/*,application/pdf'" 
    ngf-max-size="10MB">
        <a ng-show="!file"><strong>Select or Drop File Here</strong></a>
        <a ng-show="file" class="ng-hide"><strong class="ng-binding"> has been Loaded</strong></a>
</div>

在示例中，我限制为最大大小为 10MB 的 PDF。

我用TS编码，生成的代码抱歉，但是找不到原始TS...

this.onPrepareFile = function (file) {
    if (file) {
        var reader = new FileReader();
        reader.onloadend = function () {
            // yOUR FILE INFO IS IN: reader.result
        };
        reader.readAsDataURL(file);
    }
};
于 2017-06-16T16:23:21.053 回答