Can'；使用html5/javascript时不能拖放_Javascript_Html_Drag And Drop

Can'；使用html5/javascript时不能拖放

javascript html

Can'；使用html5/javascript时不能拖放,javascript,html,drag-and-drop,Javascript,Html,Drag And Drop,所以我现在只学了几个月的html/css/javascript，我似乎无法通过拖拽来使用html5/javascript。我实际上并没有创建一个网站或任何我只是想学习的东西，我有html元素可以通过jQuery拖动，但我似乎无法让它与html5/javascript一起工作我的html代码如下所示： <DOCTYPE html> <html> <body> <img id="steam" src="htt

所以我现在只学了几个月的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>

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

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如下所示：

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

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

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中的函数不同

这一行：

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

将allowdrop更改为allowdrop

小提琴：

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

您的HTML中有一个输入错误，HTML中的函数与Javascript中的函数不同

这一行：

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

将allowdrop更改为allowdrop

小提琴：

您现在在定位方面遇到了问题，因为框将自动捕捉到顶部，而没有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>


功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}

我正在使用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>


功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}

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