Javascript 如何使用拖放创建带有链接的列表

我正在尝试创建一个列表，您可以在其中拖放来自其他网站的链接。一种愿望清单

<style>   
.droptarget {
    float: left; 
    width: 100px; 
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa; } 
</style> 

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function allowDrop(event) {
    event.preventDefault();
}

function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
 }
</script>

.droptarget{
浮动：左；
宽度：100px；
高度：35px；
利润率：15px；
填充：10px；
边框：1px实心#aaaaa；}
函数allowDrop（事件）{
event.preventDefault（）；
}
函数删除（事件）{
event.preventDefault（）；
var data=event.dataTransfer.getData（“文本”）；
event.target.appendChild（document.getElementById（数据））；
}

但是出了点问题。。。 你能帮帮我吗

---

谢谢，

在您的JSFIDLE中，我发现了两个javascript错误。第一个是“uncaughtreferenceerror:allowDrop未定义”，因此我清除了javascript面板，并将所有内容都放在HTML面板中

然后我得到一个javascript错误“UncaughtTypeError:未能在“节点”上执行“appendChild”：参数1不是“节点”类型，因此我将其替换为一个

警报

如果将以下内容放在HTML面板中，并保持javascript为空，则我可以拖放链接：

<script>
function allowDrop(event) {
    event.stopPropagation();
    event.preventDefault();
}

function drop(event) {
    event.stopPropagation();
    event.preventDefault();
    var data = event.dataTransfer.getData("text/plain");
    alert(data);
 }
</script>

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>


函数allowDrop（事件）{
event.stopPropagation（）；
event.preventDefault（）；
}
函数删除（事件）{
event.stopPropagation（）；
event.preventDefault（）；
var data=event.dataTransfer.getData（“text/plain”）；
警报（数据）；
}
链接不是droppeddle请提供fiddlein fiddle拖动事件在哪里？假设我想粘贴或youtube。。。