Question

所以我现在只学习了几个月的html / css / javascript，而且我似乎无法使用html5 / javascript进行拖放操作。我实际上并没有创建一个网站或任何我只是想学习的东西，而且我已经使用jQuery将html元素变得可拖动我似乎无法使用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));
    }            
}

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

Answer 1

HTML中有拼写错误，HTML中的函数不像Javascript中的camelCase。

这一行：

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

将allowdrop更改为allowDrop。

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

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

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

无法使用拖放工具使用html5 / javascript

2 个答案: