How do I allow a drop event on a div element etc?

Question

I simply want to know how to allow a drop event on a div element.

I have an image, div and number input. The image has a 'category' property. I implement drag-n-drop so when the dragged image is dropped on the input, the input's value becomes the images' 'category' property value.

That works fine. Yet when I try to drop the image onto the div element it will NOT allow the drop and the drop event function is not carried out!

Please tell me why this is and how to allow the drop if possible.

<img id="picture" src="...">

<div id="watch"></div>

<input id="category" type="number">


<script>
    picture.category = 6332261546019;
    picture.addEventListener('dragstart',function(e){
        e.dataTransfer.setData('category',  this.category);
        e.dataTransfer.setData('url',       this.src);
    });
    category.addEventListener('drop',function(e){
        e.preventDefault();
        this.value = e.dataTransfer.getData('category');
    });
    watch.addEventListener('drop',function(e){
        e.preventDefault();
        img     = document.createElement('img');
        img.src = e.dataTransfer.getData('url');
        this.appendChild(img);
    });
</script>

Answer 1

sorry guys found out my div needed this:

watch.addEventListener('dragover',function(e){
    e.preventDefault();
});

http://www.w3schools.com/html/html5_draganddrop.asp