无法让拖放与 html5/javascript 一起使用答案

【问题标题】：Can't get Drag and Drop to work with html5/javascript无法让拖放与 html5/javascript 一起使用
【发布时间】：2013-04-26 01:53:16
【问题描述】：

所以我现在才学习 html/css/javascript 几个月，而且我似乎无法通过拖放操作来使用 html5/javascript。我实际上并没有创建一个网站或任何我只是想学习的东西，我有 html 元素可以用 jQuery 拖动我似乎无法让它与 html5/javascript 一起工作。

我的html代码如下：

<DOCTYPE html>
    <html>
        <body>
            <img id="steam" src="http://www.omgubuntu.co.uk/wp-content/uploads/2012/07/Steam_Logo.png" draggable="true" ondragstart="drag(event)" />
            <div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)"></div>
        </body>
    </html>

我的css代码如下：

#div1 {
width:350px;
height:350px;
border:2px solid #AA560B;
}

我的javascript如下：

window.onload = function(){
    function allowDrop(ev){
        ev.preventDefault();
    }
    function drag(ev){
        ev.dataTransfer.setData("text",ev.target.id);
    }
    function drop(ev){
        ev.preventDefault();
        var data=ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }            
}

我不完全确定我做错了什么。任何帮助将不胜感激。

【问题讨论】：

您能在开发者控制台中看到任何 Javascript 错误吗？
只是没有定义allowdrop事件，但我解决了这个问题。感谢您的回复。

标签： javascript html drag-and-drop

【解决方案1】：

您的 HTML 中有错字，您在 HTML 中的函数与 Javascript 中的驼峰式不同。

这一行：

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

将 allowdrop 更改为 allowDrop。

小提琴：http://jsfiddle.net/U55rc/

您现在遇到了定位问题，因为该框会自动卡到顶部而没有 Steam 徽标，但这完全是另一个问题。

【讨论】：

【解决方案2】：

我正在使用 Angular，我必须在 index.html 内的标签中包含拖放功能。这对我有帮助。

<script>
  function allowDrop(ev) {
    ev.preventDefault();
  }
  function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }
  function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }
</script>

【讨论】：