NoModificationAllowedError in Firefox when using DnD events

Question

Using some basic drag'n'drop features and i keep getting this message in Firefox, works well in Chrome though.

NoModificationAllowedError: Modifications are not allowed for this document

This happens when i try to use the clearData() function on the event when the ondrop event is fired.

HTML:

<!-- draggable element -->
<div draggable="true" ondragstart="onDragStart(event);">
<!-- dropzone element -->
<div ondragover="onDragOver(event);" ondragenter="onDragEnter(event);" ondrop="onDrop(event);"></div>

JS:

function onDragStart(event) {
    event
        .dataTransfer
        .setData('text/plain', 'test');
}
function onDragOver(event) {
    event.preventDefault();
}
function onDragEnter(event) {
    event.preventDefault(); // polyfill fix
}
function onDrop(event) {
    event.preventDefault();
    event
        .currentTarget
        .parentNode
        .classList.add("dropped");
    event
        .dataTransfer
        .clearData(); //<---- This is where it fails
}

So yeah no idea how to fix this, and i need to clear the data as i set/reset some variable and internal params using it (code omitted). Works well in chrome (even IE)

Answer 1

在 OnDragStart 中使用 Cleardata() 方法，而不是在 OnDrop() 方法中使用它。

onDragStart(event) {
    event.dataTransfer.clearData();
    event
        .dataTransfer
        .setData('text/plain', event.target.dataset.item);
}

必须使用文本/纯文本。删除时必须使用 PreventDefault()。

onDragOver(event) {
        event.preventDefault();
    }

必须像这样在 onDrop 方法中使用 PreventDefault 。

 onDrop(event) {
        const id = event
            .dataTransfer
            .getData('text');
        const draggableElement = '';
        event.preventDefault();
        this.template.querySelectorAll('.example-draggable').forEach(element => {
            if (element.innerHTML == id) {
                this.draggableElement = element;
            }
        });;
        if ((!event.target.innerText.includes('Drag From Here')) && (!event.target.innerText.includes('Drop Here'))) {
            const bar = event.target.parentElement;
            bar.appendChild(this.draggableElement);
        }
        else {

            const bar = event.target;
            bar.appendChild(this.draggableElement);

        }


    }

在这里，我在代码中间使用了 Preventdefault，这将防止在附加元素时重新加载页面。