Question

我正在尝试使用拖放界面在其表单中移动一些输入，并且有两个函数处理程序：

let drag = (event) => {
    event.dataTransfer.setData("application/x-moz-node", input1);
    event.dataTransfer.effectAllowed = "move";
};

let drop = (event) => {
    event.preventDefault()
    let data = event.dataTransfer.getData("application/x-moz-node");
    event.target.appendChild(document.getElementById(data));
}

每当我试图将输入元素放在它的位置上时，我就会收到错误。我应该如何解决它，原因是什么？

Answer 1

getElementById在DOM树中搜索具有您指定为参数的id的元素。在您的情况下，它是input1的值。

因此，您必须将拖动的id的{{1}}设置为div的值。

由于我不认为这是你的意图，你应该为可拖动的元素添加一个id：

input1

然后：

<div id="draggable-element" draggable="true" ondragstart="drag(event)">

或者你可以传递它：

ev.target.appendChild(document.getElementById('draggable-element'));

然后：

event.dataTransfer.setData("application/x-moz-node", input1);
event.dataTransfer.setData("my-draggable-id", ev.target.id);

这是fiddle

1.js：23 Uncaught TypeError：无法执行＆＃39; appendChild＆＃39; on＆＃39;节点＆＃39;：参数1不是类型＆＃39;节点＆＃39;

1 个答案: