drag & drop script started crashing after css changed

Question

I'm trying to make a div drag and drop certain places. It worked fine, but then I changed the css and now it started crashing the javascript and I don't seems to be able to find the reason in the css.

Any clue on how to fix this?

<style>
    .targetBox{
    width: 10em; 
        height: 10em; 
        -webkit-border-radius: 5em; 
        -moz-border-radius: 5em;
        border-radius: 5em;
        border:3px dashed black;
        float:left;
    }

    .imageBox{
        width: 10em; 
        height: 10em;
        -webkit-border-radius: 5em; 
        -moz-border-radius: 5em;
        border-radius: 5em;
        padding:1px;
        border:1px solid #aaaaaa; 
        background-color:red;
    }

    .imageBox-wrapper{
        position:relative;
        display:inline-block;
        margin:auto;
        top:25em;
    }
</style>

<script type="text/javascript">
    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>

<div>
    <div class="targetBox" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="targetBox" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="targetBox" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

<div class="imageBox-wrapper">
    <div class="imageBox" draggable="true" ondragstart="drag(event)"></div>
</div>

EDIT Created a Fiddle. Don't know if it's because the break happens, but for some reason the fiddle doesn't show the drag animation I see in my VS project.

Answer 1

The reason why it is broken is because you are declaring the drag function after the HTML is referencing drag.

You will need to move your JS code up (try placing it in a seperate file, and 'ing it before anything in your

Part 2: The reason why your code fails is because you have not set an ID for the element to be dragged. Set an ID for the element, and it will work:

http://jsfiddle.net/eBsqJ/2/