Question

tldr;我需要一个元素来注册拖放指针事件，但是将click和其他指针事件传递给它后面的元素。

我正在使用react-dropzone构建拖放照片上传功能。我希望dropzone覆盖整个页面，因此如果您将文件拖到页面的任何部分，您可以删除它以上传图像。当没有文件被拖过dropzone时，position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;是透明的，因此我需要点击才能注册其背后的元素。

为实现这一目标，我给dropzone组件提供了以下样式：

pointer-events: none;

但是，dropzone会导致dropzone无法识别必要的拖放事件。有没有办法识别这些特定的指针事件，同时将其他事件（如点击）传递给with open('csvfile.csv', 'r') as csvfile: all_rows = csvfile.read().splitlines() # BAD! Creates a list in memory with your file data rather than a lazy file pointer. Use with caution csvreader = csv.reader(all_rows) for row in csvreader: print(row[0])后面的元素？

Answer 1

尝试使用draggable属性。对我有用

<p draggable="true">
  jkjfj
</p>

Answer 2

我最近有一个类似的问题并设法解决它，将dropzone的z-index设置为1，同时将say元素的z-index设置为2，位置相对。

Answer 3

我刚刚通过在类＃drag-drop-target上将指针事件设置为none来解决此问题，在dragover / dragenter上将类“ user-is-dragging”添加到主体，并在dragleave dragend drop上将其删除（使用setTimeout-clearTimeout为避免闪烁），只需添加一个CSS规则：.user-is-dragging #drag-drop-target{ pointer-events: all; }

function initDragDrop(){
var droppedFiles = false;
if (dragDropSupport) {
    dragDropTarget.addClass('user-draggable');
}
body.on('dragover dragenter', function() {
    body.addClass('user-is-dragging');
    clearTimeout(timeout["dragLeaveBodyRemoveclass"]);
});
dragDropTarget.on('drag dragstart dragend dragover dragenter dragleave drop', 
function(e) {
        e.preventDefault();
        e.stopPropagation();
    })
    .on('dragover dragenter', function() {
        dragDropTarget.addClass('user-dragover fade-in');
        clearTimeout(timeout["dragLeaveBodyRemoveclass"]);
    })
    .on('dragleave dragend drop', function() {
        dragDropTarget.removeClass('user-dragover fade-in');
        clearTimeout(timeout["dragLeaveBodyRemoveclass"]);
        timeout["dragLeaveBodyRemoveclass"] = setTimeout(function(){
            body.removeClass('user-is-dragging');
        }, 300);

    })
    .on('drop', function(e) {
        droppedFiles = e.originalEvent.dataTransfer.files;
        body.removeClass('user-is-dragging');
        console.log(e.originalEvent.dataTransfer.files);
    });
}

Answer 4

我通过在 .file-drop 上将指针事件设置为 none 而在 .file-drop 上设置为 auto > .file-drop-target.file-drop-dragging-over-frame 来修复这个错误

CSS指针事件 - 接受拖动，拒绝单击

4 个答案: