html - Can't get Drag and Drop to work with html5javascript

So I have only been learning html/css/javascript for a few months now and I can't seem to get drag and drop to work with html5/javascript. I'm not actually making a website or anything I'm just trying to learn and I have got html elements to bee draggable with jQuery I just can't seem to get it to work with html5/javascript.

My html code is as followed:

<DOCTYPE html>
    <html>
        <body>
            <img id="steam" src=".png" draggable="true" ondragstart="drag(event)" />
            <div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)"></div>
        </body>
    </html>

My css code is as followed:

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

My javascript is as followed:

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));
    }            
}

I'm not entirely sure what I'm doing wrong. Any help would be greatly appreciated.

My html code is as followed:

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

My css code is as followed:

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

My javascript is as followed:

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));
    }            
}

I'm not entirely sure what I'm doing wrong. Any help would be greatly appreciated.

Share Improve this question edited May 13, 2018 at 12:49 Cœur 38.8k25 gold badges206 silver badges278 bronze badges asked May 2, 2013 at 1:00 David Suzuki Moore 811 gold badge2 silver badges5 bronze badges

can you see any Javascript errors in your developer console? – Francis Kim Commented May 2, 2013 at 1:04
Just that allowdrop event was not defined but I solved the issue. Thank you for your response. – David Suzuki Moore Commented May 2, 2013 at 23:18

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

You have a typo in your HTML, your function in HTML is not camelCase like in Javascript.

This line:

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

Change allowdrop to allowDrop.

fiddle: http://jsfiddle/U55rc/

You now have a problem with positioning because the box will automatically snap to top without the Steam logo there, but that's another problem entirely.

I'm using Angular and I had to include the drag and drop functions in my tag inside index.html. This helped me.

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Can't get Drag and Drop to work with html5javascript - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)