HTML5的拖放不起作用.尽管它没有显示任何错误

Question

我正试图拖动一个元素并将其放入文本框中。然而，它不起作用。我不确定我哪里做错了。

function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.textContent);
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
var li = document.createElement("li");
li.innerHTML = data;
console.log(li);
// var data=document.createElement('p');
// data.innerHTML=ev.dataTransfer.getData("Text");
// console.log(data);
// console.log(typeof(data));
// ev.target.appendChild(document.getElementById(li));
ev.target.appendChild((li));
ev.preventDefault();
}

<span> <textarea name="name" rows="2" cols="37" ondrop="drop(event)" ondragover="allowDrop(event)" id="target1"></textarea> </span>
<div draggable="true" ondragstart="drag(event)" id="source">Sencha</div>

Answer 1

您实际上想要做的似乎是将拖动的文本添加到文本输入中，而不是创建一个新的<li>元素，然后尝试将其添加到文本区域。例如，如果您将它添加到<div>中，但不能将HTML放入文本输入中，那么这将起作用。

function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.textContent);
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.innerHTML+=data;
ev.preventDefault();
}

<span> <textarea name="name" rows="2" cols="37" ondrop="drop(event)" ondragover="allowDrop(event)" id="target1"></textarea> </span>
<div draggable="true" ondragstart="drag(event)" id="source">Sencha</div>