SCE.add('sce-yardmap-quadrant', function (Y, NAME) {
    var CLASS_NAME = 'sceYardmapQuadrant';
    var BUNDLE_PATH_BASE = 'yardmap:quadrant:';
    var MAIN_CSS_CLASS = "sce-yardmap-quadrant-container",
        IMG_BACKGROUND_CLASS = 'sce-yardmap-quadrant-background',
        MAP_LOCATION_CLASS = 'sce-yardmap-location',
        YARD_CONTENT_CLASS = 'sce-yardmap-content',
        LOCATION_CODE_CLASS = 'sce-yardmap-location-code',
        DATA_LOCATION_ID = 'location-id',
        DATA_CONTENT_ID = 'content-id';

    var MAP_ELEMENT_SELECTED = 'mapElementSelected',
        HEIGHT_SET = 'heightSet';


    Y.namespace('SCE.Yardmap').Quadrant = Y.Base.create(
        CLASS_NAME,
        Y.View,
        [], {

        events: {
            '.sce-yardmap-content': {
                click: '_selectContent'
            },
            '.sce-yardmap-element-selection-area': {
                click: '_onMapElementClick'
            },
            
            '.sce-yardmap-stack-data': {
                click: '_toggleStack'
            }
        },

        initializer: function () {

            this._eventHandles = [];
            this._mapTemplate = Y.Handlebars.compile(Y.SCE.Commons.getTemplate(NAME, 'yard-quadrant.hbs'));
            this._contentTemplate = Y.Handlebars.compile(Y.SCE.Commons.getTemplate(NAME, 'yard-content.hbs'));


            this.get('partialTemplates').forEach(function (partial) {
                var template = Y.SCE.Commons.getTemplate(NAME, partial);
                var templateName = NAME + '.' + partial;
                Y.Handlebars.registerPartial(templateName, Y.Handlebars.compile(template));
            });


            this._quadrantModel = Y.SCE.ResourcecomponentModel.create('yardmap', 'Quadrant', null, null, {
                query: this.get('quadrantQuery')
            }).createDataModelList();

            this._locationModelList = Y.SCE.ResourcecomponentModel.create('yardmap', 'YardLocation', null, null, null)
                .createDataModelList();

            // create data model list if not set
            var dataModelList = this.get('data');
            if (!dataModelList) {
                dataModelList = this.get('configuration').createDataModelList();
                this.set('data', dataModelList);
                this._dataOwner = true;
            }

            var actionName = this.get('dropAction').name,
                resourceConfig = this.get('configuration');
            this._dropActionConfig = resourceConfig.createActionConfiguration(actionName);

            var self = this;
            // propagate filter change in configuration to data model list
            this.get('configuration').after('filterChange', function (e) {
                dataModelList.set('filter', e.newVal);
                var key = 'location.element.placings.block.quadrant.id';
                if (e.newVal.hasOwnProperty(key)) {
                    var quadrantId = e.newVal[key];
                    self._quadrantModel.set('filter', {
                        id: quadrantId
                    });
                if (self._quadrantId == null || self._quadrantId != quadrantId )
                    self._quadrantId = quadrantId;
                    self._backgroundUrl = undefined;
                }
            });

            dataModelList.addTarget(this);
        },

        destructor: function () {
            this._destroyPickers();
            Y.each(this._eventHandles, function (event) {
                event.detach();
            });
            this._eventHandles = [];
            this._draggedModel = null;
        },

        _destroyPickers: function () {
            if (this._pickers) {
                Object.values(this._pickers).forEach(function (picker) {
                    picker.destroy({
                        remove: true
                    });
                });
            }
            this._pickers = [];
        },


        render: function () {
            var container = this.get('container');
            container.addClass(MAIN_CSS_CLASS);

            this._eventHandles.push(container.delegate("dragstart", this.onDragStart.bind(this), "." + YARD_CONTENT_CLASS));
            this._eventHandles.push(container.delegate("dragend", this.onDragEnd.bind(this), "." + YARD_CONTENT_CLASS));
            this._eventHandles.push(container.delegate("dragover", this.allowDrop, "." + MAP_LOCATION_CLASS));
            this._eventHandles.push(container.delegate("drop", this.onDrop.bind(this), "." + MAP_LOCATION_CLASS));
        },


        refresh: function () {
            if (this.get('loadModel')) {
                var self = this;
                this._quadrantModel.load(
                    function (e) {
                        self.get('data').load(self._drawMap.bind(self));
                    }
                );

            }
        },

        _drawMap: function () {
            var getContentCssClass = function (model) {
               
                var classes = [];
                if (model.get("transitStyle")) {
                    classes.push("sce-yardmap-transit-style");
                }
                if ( model.get('loadingUnit.entityName')) {
                    classes.push("sce-yardmap-entity-" + model.get('loadingUnit.entityName').toLowerCase());
                }
                 
                return (classes.length == 0) ?  "" : (classes.join(" ") + " ");
            }

            var mapNode = Y.Node.create(this._mapTemplate({
                bundlePath: BUNDLE_PATH_BASE,
                quadrant: this._sortedData(this._quadrantModel.item(0).toJSON()),
                backgroundClass: IMG_BACKGROUND_CLASS,
                backgroundUrl: this._getBackgroundUrl(),
                hasBackgroundUrl: this._getBackgroundUrl() != null,
                locationClass: MAP_LOCATION_CLASS,
                locationId: DATA_LOCATION_ID
            }));

            var self = this,
                configuration = this.get('configuration'),
                modelList = configuration.createDataModelList();
            modelList.comparator = function (model) {
                // sort content by location id, for stacks use also level to sort the stack.
                // to create a unique number location.id is multiplied by 100 and then we sum the level which range is 0-99
                // 100 - level, to sort reversed
                return model.get('location.id') * 100 + 100 - (model.get('level') ? model.get('level') : 0);
            };
            // adding data with a comparator already set inserts data in order
            modelList.add(this.get('data').toJSON());

            modelList.each(function (model) {
                var locationNode = mapNode.one(self._locationSelector(model.get('location.id')));
                if (locationNode) {
                    var content = Y.Node.create(self._contentTemplate({
                        cssClass: getContentCssClass(model) + configuration.getConditionClasses(model),
                        c: model.toJSON(),
                        contentClass: YARD_CONTENT_CLASS
                    }));
                    content.setAttribute("data-content-id", configuration.getIdValue(model));

                    content.all("[data-attribute-picker]").each(function (node) {
                        var attribute = configuration.getAttribute(node.getData('attribute-picker')),
                            realAttribute = configuration.getRealAttributeConfig(attribute, model),
                            realResourceAttributeConfig = configuration.getRealResourceAttributeConfig(attribute, model),
                            formatted = Y.SCE.Picker.Factory.getPickerAsHtml(model.get(attribute.get('name')), realAttribute, realResourceAttributeConfig, model, { view: CLASS_NAME }),
                            conditionNode = node.ancestor('.sce-picker-condition-node') || node;
                        node.setHTML(formatted);
                        conditionNode.addClass(realAttribute.getConditionClasses(model));
                    });
                    content.all("[data-attribute-label]").each(function (node) {
                        node.setAttribute('data-sce-intl', configuration.getAttribute(node.getData('attribute-label')).get('bundlePath'));
                    });

                    content.setAttribute('draggable', self.isDragEnabled(model));

                    // remove location code element before appending content
                    locationNode.all('.' + LOCATION_CODE_CLASS).each(function (l) { l.remove(); });
                    // handle stacks
                    if (model.get('location.stackable')) {
                        locationNode.one('.sce-yardmap-stack-overlay').append(content);
                    } else {
                        locationNode.append(content);
                    }
                }
            });

            Y.SCE.Intl.intlDomNodes(mapNode);
            var container = this.get('container');
            container.empty();
            container.append(mapNode);

            this._fixHeight();
        },

        _getBackgroundUrl: function () {
            if (this._backgroundUrl) {
                return this._backgroundUrl;
            }
            var attachmentUuid = this._quadrantModel.item(0).get('backgroundRef.uuid');
            if (!attachmentUuid) {
                this._backgroundUrl = null;
                return null;
            }
            var attachment = new Y.SCE.ResourcecomponentModel.create('yardmap', 'Attachment').createDataModel({ uuid: attachmentUuid });
            this._backgroundUrl = Y.SCE.DataSync.API_ORIGIN + attachment.buildResourceUrl();
            return this._backgroundUrl;
        },

        _fixHeight: function () {
            var container = this.get('container'),
                startY = container.getY(),
                blocks = container.all('.sce-yardmap-block'),
                fixedHeight = this._quadrantModel.item(0).get('height'),
                uom = 'em',
                maxHeight = 0;

            if (fixedHeight) {
                maxHeight = fixedHeight;
                uom = 'em';
            } else {
                blocks.each(function (block) {
                    var height = block.get('offsetHeight'),
                        y = block.getY();
                    if (y > 0) {
                        var blockHeight = y - startY + height;
                        maxHeight = maxHeight > blockHeight ? maxHeight : blockHeight;
                    }
                });
                uom = 'px';
            }

            if (maxHeight > 0) {
                maxHeight = maxHeight + 10;
                var newHeight =  maxHeight + uom;
                container.one('.' + IMG_BACKGROUND_CLASS).setStyle('height', newHeight);

                if (this.get('expandViewHeight')) {
                    container.setStyle('height', newHeight);
                }
                // fire event wiht height for other dashboard componens
                //  to align their height
                if (!this._viewHeight || this._viewHeight != newHeight) {
                    this._viewHeight = newHeight;
                    this.fire(HEIGHT_SET, {height: newHeight });
                }
                
            }
           
        },

        _locationSelector: function (locationId) {
            return '.' + MAP_LOCATION_CLASS + '[data-' + DATA_LOCATION_ID + '="' + locationId + '"]';
        },

        _sortedData: function (quadrantData) {
            if (!quadrantData.blocks) {
                return;
            }
            var locationModel = this._locationModelList;

            quadrantData.blocks.forEach(function (block) {
                block.elements = [];
                if (block.placings) {
                    block.placings.sort(function (a, b) { return a.blockOrdinal - b.blockOrdinal });
                    // simplify, remove placing                    
                    block.elements = block.placings.map(function (p) {
                        p.element.blockOrdinal = p.blockOrdinal;
                        p.element.contentLayout = p.contentLayout;
                        return p.element;
                    });

                    block.elements.forEach(function (element) {
                        if (element.locations) {
                            element.locations.sort(function (a, b) { return a.elementOrdinal - b.elementOrdinal });
                            element.locations.forEach(function (l) {
                                locationModel.add(l);
                            });
                        }
                    });
                }
            });

            return quadrantData;
        },

        /**
         * Set the given query in data model and load or reset if null
         *
         * @method query
         * @param {Object} query the query to set
         */
        query: function (query) {
            var data = this.get('data');
            if (query) {
                data.setQuery(query);
                data.load();
            } else {
                data.setQuery({});
                data.reset();
            }
        },

        _selectContent: function (e) {
            var multi = this.get('selectionMulti'),
                shiftKey = e.shiftKey,
                ctrlKey = e[Y.UA.os.search('macintosh') === 0 ? 'metaKey' : 'ctrlKey'];
            e.preventDefault();
            this._fixHeight();
            this._selectModel(e.currentTarget, ctrlKey, shiftKey, YARD_CONTENT_CLASS);
        },

        _getModelByNode: function (node) {
            if (node.hasClass(YARD_CONTENT_CLASS)) {
                var dataModelList = this.get('data'),
                    id = node.getData(DATA_CONTENT_ID);
                return dataModelList.getById(id)
            } else if (node.hasClass(MAP_LOCATION_CLASS)) {
                var dataModelList = this._locationModelList,
                    id = node.getData(DATA_LOCATION_ID);
                return dataModelList.getById(id);
            }
        },

        _selectModel: function (node, add, range, targetClass) {
            var selectedModels = this.get('selectedModels'),
                multi = this.get('selectionMulti'),
                model = this._getModelByNode(node),
                selected = node && node.hasClass('selected'),
                index;
            if (!model) {
                return;
            }

            // clicking a selected model node will always deselect it
            if (selected) {
                node.removeClass('selected');
                index = selectedModels.indexOf(model);
                if (index !== -1) {
                    selectedModels.splice(index, 1);
                    selectedModels = selectedModels.slice();
                    this.set('selectedModels', selectedModels);
                }

                // check mode and key pressed
            } else {

                // multiple selection not enabled or no modifier key pressed
                if (!multi || (!add && !range)) {
                    this.get('container').all('.' + targetClass + '.selected').removeClass('selected');
                    selectedModels = [model];
                    node.addClass('selected');

                    // multiple selection enabled with range key (shift) pressed, select range from last selected model node if any
                } else if (range && selectedModels.length) {
                    var firstModel = selectedModels[selectedModels.length - 1],
                        lastModel = model,
                        dataArray = this.get('data').toArray(),
                        firstIndex = dataArray.indexOf(firstModel),
                        lastIndex = dataArray.indexOf(lastModel),
                        diff = lastIndex - firstIndex,
                        sign = diff < 0 ? -1 : 1;
                    this.get('container').all('.' + targetClass + '.selected').removeClass('selected');
                    diff = Math.abs(diff);
                    selectedModels = selectedModels.slice();
                    for (var i = 0; i <= diff; i++) {
                        model = dataArray[firstIndex + sign * i];
                        node = this._getNodeByModel(model);
                        selectedModels.push(model);
                        node.addClass('selected');
                    }

                    // multiple selection enabled with add key (ctrl) or range key (shift with no selected models) pressed, add model to selection
                } else {
                    selectedModels = selectedModels.slice();
                    selectedModels.push(model);
                    node.addClass('selected');
                }

                // save selected models
                this.set('selectedModels', selectedModels);
            }
        },

        isDragEnabled: function (model) {
            var configuration = this.get('configuration');
            return configuration.isActionEnabled(this.get('dropAction').name, model);
        },

        onDragStart: function (e) {
            this._draggedModel = this._getModelByNode(e.target);
            if (this.isDragEnabled(this._draggedModel)) {
                this.get('container').all(this.get('dropAction').selector).addClass('drop-target-active');
            }
        },
        onDragEnd: function (e) {
            e.preventDefault();
            this.get('container').all(this.get('dropAction').selector).removeClass('drop-target-active');
        },
        allowDrop: function (e) {
            if (e.currentTarget.hasClass('drop-target-active')) {
                // prevent default allows drop
                e.preventDefault();
            }
        },
        onDrop: function (e) {
            e.preventDefault();
            var dropAction = this.get('dropAction');
            this.get('container').all(dropAction.selector).removeClass('drop-target-active');

            var targetModel = this._getModelByNode(e.currentTarget);
            if (targetModel != null) {

                var actionName = dropAction.name,
                    dataModel = this._dropActionConfig.createDataModel();

                dataModel.set(dropAction.parameter, targetModel.toJSON());
                /*    this._draggedModel.action({
                        actionName: actionName,
                        actionDataModel: dataModel
                    }, this.actionCallback.bind(this));*/

                // fire event to execute action with action handler in dashboard
                var actionParams = {};
                actionParams[dropAction.parameter] = targetModel.toJSON();

                this.fire(Y.SCE.Commons.EVENT_START_ACTION, {
                    configurationModel: this.get('configuration'),
                    selectedModels: [this._draggedModel],
                    dataModel: this.get('data'),
                    actionId: actionName,
                    actionParams: actionParams,
                    options: {
                        skipParameterForm: dropAction.skipParameterForm
                    }
                });
            }
        },
        actionCallback: function (error) {
            if (error) {
                throw error;
            }
            new Y.SCE.Notification({
                // recycle stantard action bundle path
                message: Y.SCE.Intl.getComponentLabel('sceActionhandler', 'msg.action.success', {}),
                type: Y.SCE.Notification.SUCCESS
            }).render();
            this.refresh();
        },

        _onMapElementClick: function (e) {
            var quadrantData = this._quadrantModel.item(0).toJSON(),
                mapElementConfig = Y.SCE.ResourcecomponentModel.create('yardmap', 'MapElement', null, null, null),
                elementList = mapElementConfig.createDataModelList();

            quadrantData.blocks.forEach(function (block) {
                if (block.elements) {
                    block.elements.forEach(function (element) {
                        elementList.add(element);
                    });
                }
            });
            var i = 10,
            node = e.currentTarget,
                id = node.getData('element-id');
            while (!id && i > 0) {
                node = node.get('parentNode');
                id = node.getData('element-id');
                i--;
            }

            var elementModel = elementList.getById(id);
            if (elementModel) {
                this.fire('mapElementSelected', {
                    mapElement: elementModel
                });
            }
        },

        _toggleStack: function (e) {
            var node = e.currentTarget,
                restore = function (node) {
                    node.removeClass('stackable-open');
                    if (node.hasClass('vertical-content-suspend')) {
                        node.addClass('vertical-content');
                        node.removeClass('vertical-content-suspend');
                    }
                };

            while (!node.hasClass(MAP_LOCATION_CLASS)) {
                node = node.get('parentNode');
            }

            if (node.hasClass('stackable-open')) {
                restore(node);
            } else {
                this.get('container').all('.stackable-open').each(restore);
                if (node.getData('content-count') !== '0') {
                    node.addClass('stackable-open');
                    if (node.hasClass('vertical-content')) {
                        node.removeClass('vertical-content');
                        node.addClass('vertical-content-suspend');
                    }
                }
            }
        },

        // method for designer
        highlightBlock: function (selectedBlocks, attempt) {
            this.clearBlockHighlight();
            var retryInterval = 100,
                maxAttempts = 2000 / retryInterval;

            if (selectedBlocks && selectedBlocks.length > 0) {
                var id = selectedBlocks[0].get("id"),
                    blockNode = this.get('container').one('.sce-yardmap-block[data-block-id="' + id + '"]'),
                    self = this;
                if (blockNode) {
                    blockNode.addClass('sce-yardmap-block-highlight');
                } else {
                    if (attempt <= maxAttempts) {
                        console.log(attempt);
                        setTimeout(function () {
                            self.highlightBlock(selectedBlocks, attempt + 1);
                        }, retryInterval);
                    }
                }
            }
        },
        clearBlockHighlight: function () {
            this.get('container').all('.sce-yardmap-block-highlight').each(function (node) {
                node.removeClass('sce-yardmap-block-highlight');
            });
        }
    }, {
        ATTRS: {
            /**
             * Resource configuration.
             *
             * @attribute configuration
             * @type {SCE.ResourcecomponentModel}
             * @writeOnce
             * @default null
             */
            configuration: {
                value: null,
                writeOnce: 'initOnly'
            },

            /**
             * Data model list, a new one is created if not set.
             *
             * @attribute data
             * @type {SCE.DataModelList}
             * @writeOnce
             * @default null
             */
            data: {
                value: null
            },

            /**
             * Selected models.
             *
             * @attribute selectedModels
             * @type {SCE.DataModel[]}
             * @default []
             */
            selectedModels: {
                value: []
            },

            quadrantQuery: {
                value: {
                    '_include': '*,blocks.*,blocks.placings.*, blocks.placings.element.*, blocks.placings.element.locations.*',
                    '_exclude': 'audit,blocks.quadrant,blocks.audit,blocks.placings.element.placings,blocks.placings.element.audit,blocks.placings.element.locations.element,blocks.placings.element.locations.audit'
                }
            },

            partialTemplates: {
                value: ['yard-dock.hbs', 'yard-area.hbs', 'yard-gate.hbs']
            },
            dropActions: {
                value: {
                    "moveToZone": {
                        name: "moveToZone",
                        parameter: "destination",
                        selector: '.' + MAP_LOCATION_CLASS + '.empty',
                        skipParameterForm: false
                    }, "moveToDock": {

                        name: "moveToDock",
                        parameter: "destination",
                        selector: '.' + MAP_LOCATION_CLASS + '.empty',
                        skipParameterForm: false
                    }}
            },

            dropAction: {
                value: {
                    name: "move",
                    parameter: "destination",
                    selector: '.' + MAP_LOCATION_CLASS + '.empty',
                    skipParameterForm: false
                }
            },

            expandViewHeight: {
                value: true
            }

        }
    }
    )
},
    '1.0.0-SNAPSHOT', {
    requires: ['sce-error', 'sce-notification']
})

As you can see the dropaction is active, but i want to substitute the dopaction with the corresponding dropActions depending on the dropDestination (sorry but i don't know how to retrieve that yet)

targetModel.toJSON() : {
    "version": 1720689367366.48,
    "elementOrdinal": 0,
    "visibleLabel": "ZONA DROPOFF#0",
    "status": "OPEN",
    "fullLocation": false,
    "contentCount": 0,
    "availablePlaces": 1,
    "stackable": false,
    "maxStackHeight": 0,
    "withCode": false,
    "id": 2410
}
WHich is the entity:
package eu.reply.lea.services.yard.entity;

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.EnumType;
import jakarta.persistence.Enumerated;
import jakarta.persistence.ManyToOne;
import jakarta.persistence.OneToMany;
import jakarta.persistence.PrePersist;
import jakarta.persistence.Transient;
import jakarta.validation.constraints.NotNull;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

import com.fasterxml.jackson.annotation.JsonIgnore;
import lombok.AccessLevel;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;

import eu.reply.lea.services.yard.exception.YardLocationFullException;
import eu.reply.lea.services.yard.util.ColSizes;
import eu.reply.sce.backend.core.entity.StandardEntity;

@Getter
@Setter
@Entity
@NoArgsConstructor(access = AccessLevel.PROTECTED)
public class YardLocation extends StandardEntity {

    public static final String Q_BY_ENTITY_REF = "YardLocation.Q_BY_ENTITY_REF";

    @NotNull
    @ManyToOne
    private MapElement element;

    /**
     * Used to sort locations inside elements asc mode.
     */
    private int elementOrdinal;

    /**
     * Optional code for location handling with named locations.
     * Null when locations are used as generic capacity.
     */
    @Column(length = ColSizes.CODE)
    private String code;

    @Setter(AccessLevel.PACKAGE)
    @Column(length = ColSizes.CODE)
    private String visibleLabel;

    @Column(length = ColSizes.ENUM)
    @Enumerated(EnumType.STRING)
    private LocStatus status;

    @Column(length = ColSizes.FIFTY)
    private String currentOperation;

    private boolean fullLocation;

    private int contentCount;
    private int availablePlaces;

    private boolean stackable;
    private Integer maxStackHeight;

    @Transient
    @Setter(AccessLevel.PROTECTED)
    private boolean withCode;

    @Setter(AccessLevel.PROTECTED)
    @OneToMany(mappedBy = "location")
    private List<YardContent> yardContents;

    public YardLocation(final String code,
                        final LocStatus status,
                        final boolean stackable,
                        final Integer maxStackHeight) {
        this.code = code;
        this.status = status;
        this.stackable = stackable;
        this.maxStackHeight = maxStackHeight;
        this.checkPlaces();
    }

    protected void addContent(final YardContent content) {
        if (this.isFullLocation()) {
            throw new YardLocationFullException();
        }
        if (yardContents == null) {
            yardContents = new ArrayList<>(1);
        }
        super.addChild(content, yardContents);
        content.setLocation(this);
        if (!stackable) {
            content.setLevel(null);
        }
        checkPlaces();
    }

    protected void removeContent(final YardContent content) {
        if (yardContents == null) {
            yardContents = new ArrayList<>(1);
        }
        super.removeChild(content, yardContents);
        content.setLocation(null);
        checkPlaces();
    }

    public List<YardContent> getYardContents() {
        if (yardContents == null) {
            yardContents = new ArrayList<>(1);
        }
        return Collections.unmodifiableList(yardContents);
    }

    protected void checkPlaces() {
        if (yardContents == null) {
            yardContents = new ArrayList<>();
        }
        contentCount = yardContents.size();
        if (stackable) {
            fullLocation = maxStackHeight == contentCount;
            availablePlaces = maxStackHeight - contentCount;
        } else {
            fullLocation = contentCount > 0;
            availablePlaces = 1 - contentCount;
        }
    }

    @JsonIgnore
    public Boolean isEmpty() {
        return contentCount == 0;
    }

    // makes life easier on FE
    public boolean isWithCode() {
        withCode = code != null;
        return withCode;
    }

    public void updateVisibleLabel() {
        visibleLabel = code != null ? code : (element != null ? element.getCode() : "") + "#" + elementOrdinal;
    }

    @PrePersist
    protected void prePersist() {
        fullLocation = false;
        contentCount = 0;
        if (status == null) {
            status = LocStatus.OPEN;
        }
        updateVisibleLabel();
    }
}

But i don't have the mapelement which is needed for knowing the locaiton type (dock or zone)
Do you have any suggestion?