events not working in droppable

Question

I am trying to work with jquery ui droppable. I have a set of elements that may or may not be used. If they aren't used, they appear on a list and I want to let my users drop them into the page.

For some weird reason, though, none of the droppable events are firing. I'm using jquery 1.11.1, with corresponding UI version

The code is pretty basic

$("#cameras_section").resizable({
    containment: "#body_size"
}).draggable({
    containment: "#body_size"
}).droppable({
    accept: "#body_size", over: function(event, ui) {
        alert('over')
    }, out: function(event, ui) {
        alert('out')
    }, drop: function(event, ui) {
        alert('dropped')
    }
});

You can see it not working here (Note: I did run it through the html checker and the only errors are charset errors I have to straighten out)

Answer 1

Your draggable and droppable are the same element. I'm not sure what you are trying to do since you did not provide relevant HTML, however, I'm confident that if you separate your resizable, draggable, and droppable initializers (and elements), you will be on the right track.

Here is an example from the docs.

HTML

<div id="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>

JS

$("#draggable").draggable();
$("#droppable").droppable({
    drop: function (event, ui) {
        $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");
    }
});

FIDDLE