Question

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

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

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

谢谢，

Answer 1

在你的jsfiddle中，我有两个javascript错误。第一个是“Uncaught ReferenceError：allowDrop is not defined。”，所以我已经清除了javascript-panel并将所有内容放在了HTML-panel中。

然后我收到一个javascript错误“Uncaught TypeError：在'Node'上执行'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>

如何使用拖放创建包含链接的列表

1 个答案: