Question

I have a problem that I can’t seem to figure out. I’m trying to have a droppable element conditionally fire a different function based on the class of the item dropped. For the life of me I can’t figure out how to do this. Here’s the link: http://jsfiddle.net/643PC/22/

The pageContainer accepts Rows. Rows accept Spans. Spans should accept Actions and Fields and fire a different function based on which item is dropped. Any ideas?

Finished function with David’s help:

    function generalDrop(event, ui) {
        var appendTarget = $(this);
        if (ui.draggable.hasClass('field-item')) {
            fieldDrop(event, ui, appendTarget);
        }
        else {
            actionDrop(event, ui, appendTarget);
        }
    }

    function actionDrop(event, ui, appendTarget) {
        $(document.createElement('a'))
            .addClass('btn btn-primary')
            .attr('href', '#')
            .text('Button')
            .appendTo(appendTarget)
    }

Answer 1

Change your generalDrop function to this:

function generalDrop(event, ui) {
    if (ui.draggable.hasClass('field-item')) {
        fieldDrop(event, ui);
    }
    else {
        actionDrop(event, ui);
    }
}