不能让拖放和html5/javascript一起工作

Can't get Drag and Drop to work with html5/javascript

本文关键字：javascript 一起 工作 html5 拖放 不能      更新时间：2023-09-26

所以我只学习了几个月的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));
    }            
}

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

你的HTML中有一个错别字，你的HTML函数不像Javascript中的camelCase

这条线

: 

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

修改allowdrop为allowdrop。

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

你现在有一个定位的问题，因为盒子会自动捕捉到顶部没有Steam的标志，但这完全是另一个问题。

我使用的是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>
相关文章：