design manager js

//make the template droppable and check on drop if the dropped object has enough space
jQuery('.template_structure td:not(.structure_td)').droppable(
{
    accept: ".place_box_drag, .module_drag, .place_drag, .pic_slide_drag, .prod_slide_drag",    //accept object with these classes
    tolerance: "pointer",                                                                       //setting that the objects should be dropped where the pointer is
    drop: function(event, ui)                                                                   //check the object
    {
        //setting up needed variables
        var allowed_size    = jQuery(this).attr('colspan');
        var sizes           = new String(ui.draggable.data('sizes'));
        var drop_ok         = false;
        var module_id       = ui.draggable.data('id');
        var dropped_realm   = jQuery(this);
        var used_space      = calculateUsedSpace(dropped_realm);
        var used_size       = 0;
        var mod_no_change   = false;

        //check if the order has changed
        jQuery(dropped_realm).children().each(function(index,element)
        {
            element = jQuery(element);

            if(element.data('id') == module_id)
            {
                mod_no_change = true;
            }
        });

        //skipp all checks when the order has only changed
        if(mod_no_change)
        {

            ui.draggable.clone().removeAttr('style').appendTo(this);
            ui.draggable.remove();

            makeDraggable();

            templateSave('temp');
        }
        else
        {
            sizes = sizes.split('|');

            //in the sidebars are more than one module with the size one allowed because they are arranged vertically
            if(this.id != 'sidebar_1' && this.id != 'sidebar_2')
            {
                sizes = jQuery.grep(sizes, function(value)
                {
                    return value <= allowed_size;
                });

                if(used_space == 0)
                {
                    //use the max space if the realm is empty
                    used_size = Math.max.apply(Math, sizes);
                }
                else if(used_space >= allowed_size)
                {
                    jQuery('#position_error').html("Dieser Bereich ist voll!").dialog('open');
                    return false;
                }
                else
                {
                    //filter all sizes which are with the used size greater as the realm
                    sizes = jQuery.grep(sizes, function(value)

                            {
                        //parse to int because variables are normally only concatinated
                        var calc_value = parseInt(value)+parseInt(used_space);

                        return calc_value <= allowed_size;
                    });

                    //use the max size which is still available
                    used_size = Math.max.apply(Math, sizes);
                }
            }
            else
            {
                used_size = 1;
            }

            //exception for the categories beacause categories are only allowed in exact size matches
            if(module_id == 1)
            {
                var cat_allowed = 0;

                //check the realm
                if(this.id == 'sidebar_1' || this.id == 'sidebar_2')
                {
                    cat_allowed = 1;
                }
                else
                {
                    cat_allowed = jQuery('#template_columns').val();
                }

                //check the module size
                jQuery.each(sizes, function(index, element)
                {
                    if(element == cat_allowed && allowed_size == cat_allowed)
                    {
                        drop_ok = true;
                        return false;
                    }
                });

                if(drop_ok)
                {
                    ui.draggable.clone().data('usedSize', used_size).attr('data-used-size', used_size).removeAttr('style').appendTo(this);
                    ui.draggable.remove();

                    makeDraggable();

                    templateSave('temp');
                }
                else
                {
                    jQuery('#position_error').html("Die Kategorien dürfen nur in eine Sidebar, oder in einen leeren Bereich, der über die ganze Breite geht, gelegt werden.").dialog('open');
                    return false;
                }
            }
            else
            {
                jQuery.each(sizes, function(index, element)
                {

                    if(element <= allowed_size)
                    {
                        drop_ok = true;
                        return false;
                    }
                });

                if(drop_ok)
                {
                    ui.draggable.clone().data('usedSize', used_size).attr('data-used-size', used_size).removeAttr('style').appendTo(this);
                    ui.draggable.remove();

                    makeDraggable();

                    templateSave('temp');
                }
                else
                {
                    jQuery('#position_error').html("Das Modul passt nicht in den gewünschten Bereich.").dialog('open');
                    return false;
                }
            }
        }
    }
});