Question

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

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

我无法使用dragstart事件，因为它会触发正在拖动的HTML元素，在这种情况下，它是来自用户桌面的文件或其他内容。我也尝试了以下内容：

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

但是，对于光标所在的每个嵌套元素，都会触发enter和leave事件，因此我获得了大量事件，并且该类不断地来回切换。绝对不是我想要的。

有什么想法吗？

Answer 1

由于没有人发布任何我发布的信息，既不稳定也不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似乎：）

你的结局如何？

Answer 2

你可以使用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);
    }
};

突出显示HTML拖放中的拖放区域

2 个答案: