Question

I was trying to improve my web-dev skills for work but got a bit carried away with jQuery’s drag and drop feature. Unfortunately I can’t get the “drop” or “over” events of the droppable to fire.

I didn’t want to use a jQuery table drag/drop plugin so i have multiple div in a div in a td structures (all generated in $(document).ready). The middle div is to be the droppable and the inner most div is to be the draggable. The generated HTML looks like this:

<td class="vertical">
<div id="droppable3" class="droppable ui-droppable" style="width: 100%; height: 100%;"
over="function () { alert("working!"); }" 
drop="function (event, ui) { 
    debugger;
    var firstDrag = ui.draggable;
    var secondDrag = $(this).childNodes[0];
    var destDrop = $(this);
    var sourceDrop = firstDrag.parent;
    $("#middle").append("first drag:" + firstDrag.id + "\nSecondDrag:" + secondDrag.id
     + "\ndest Drop:" + destDrop.id + "\nsourceDrop:" + sourceDrop.id); }">
        <div id="draggable3" class="draggable ui-draggable" 
        style="width: 100%; height: 100%;">
        </div>
</div>
</td>

and it is exactly the same in other TDs except for the ids.

Now the dragging seems to work fine; i can drag that inner div out and it will revert back if i don’t put it on an appropriate droppable or just stick there if i do but it never triggers the “over” or “drop” events. The debugger line in that code is never hit.

Here is how i’m setting up the draggable/droppable:

function getTD(claz){
var td = jQuery("<td/>",{'class': claz});
var droppable = jQuery("<div/>",{
    'class': 'droppable',
    width: '100%',
    height:'100%',
    id: "droppable"+ids[index],
    over: function() {
        alert('working!');
    },
    drop: function(event,ui){
        debugger;
        var firstDrag = ui.draggable;
        var secondDrag = $(this).childNodes[0];
        var destDrop = $(this);
        var sourceDrop = firstDrag.parent;
        $("#middle").append("first drag:"+firstDrag.id +"\nSecondDrag:"+secondDrag.id
            +"\ndest Drop:"+destDrop.id +"\nsourceDrop:"+sourceDrop.id);

        }
    });
    var draggable = jQuery("<div/>",{
        'class': 'draggable',
        width: '100%',
        height:'100%',
        id: "draggable"+ids[index], 
    });

    draggable.draggable({
        revert: 'invalid'
    });
    droppable.droppable({
        accept: ".draggable"
    });
    index++;
    droppable.append(draggable);
    td.append(droppable);
    return td;

}

Basically what i am trying to achieve is swappable tiles in a table and i’m pretty sure the js in the event handler is rubbish but we’ll deal with that once it’s firing.

Oh and im using:
https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js

Any comments would be appreciated.
Thanks 🙂

EDIT:

I was being really stupid. I was putting the “drop” and “over” events in the attributes of the element, not the options of the droppable!

Answer 1

Is that what you wanted?

Note that you should create a droppable with callbacks like this

$("#something").droppable({
    drop: function(event, ui) {
        // action
    },
    over: function() {
        // action
    }
});