HTML5 如何禁止拖放文件夹?

21 min read

要禁止在HTML5中拖放文件夹，可以在拖放事件中使用preventDefault()函数来阻止默认的拖放行为。

以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>禁止拖放文件夹</title>
</head>
<body>
    <div id="dropArea" style="width: 300px; height: 200px; border: 2px dashed #000;">将文件拖放到此区域</div>

    <script>
        var dropArea = document.getElementById('dropArea');

        // 阻止默认的拖放行为
        dropArea.addEventListener('dragover', function(e) {
            e.preventDefault();
        });

        dropArea.addEventListener('drop', function(e) {
            e.preventDefault();

            // 处理拖放的文件
            var files = e.dataTransfer.files;
            console.log(files);
        });
    </script>
</body>
</html>

在上面的示例中，dragover事件处理程序使用preventDefault()函数来阻止默认的拖放行为。drop事件处理程序也使用preventDefault()函数来阻止默认的文件打开行为。此时，拖放事件将被禁止，用户无法拖放文件夹到指定区域。