1

所以我现在才学习 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));
    }            
}

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

4

2 回答 2

4

您的 HTML 中有错字，您在 HTML 中的函数不像 Javascript 中的驼峰式命名法。

这一行：

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

将 allowdrop 更改为 allowDrop。

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

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

于 2013-05-02T04:58:24.633 回答
0

我正在使用 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>
于 2021-04-22T19:27:52.033 回答