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

How to create a list with links, using drag and drop

本文关键字：链接 列表 何使用 拖放 创建      更新时间：2023-09-26

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

<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>

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

谢谢

在你的jsfiddle中，我得到了两个javascript错误。第一个是"Uncatch ReferenceError： allowDrop is not defined"，所以我清除了javascript面板并将所有内容都放在HTML面板中。

然后我收到一个javascript错误"未捕获的类型错误：无法在'节点'上执行'appendChild'：参数1不是'Node'类型"，所以我用alert替换了它。

如果您将以下内容放在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>
相关文章：