Source: ui/dnd/DropTarget.js

import { EventObject } from "../../events/EventObject.js";

export { DropTarget };

/**
 * A generic drop target.
 * 
 * Events:
 * * dragover
 * * drop
 *
 * @author rkoppe <roland.koppe@awi.de>
 * @memberof vef.ui.dnd
 */
class DropTarget extends EventObject {

    element = null;
    handlers = [];

    static preventDocumentDrop = function (event) {
        event.preventDefault();
    };

    events = {
        'dragover': [],
        'drop': []
    }

    /**
     * Initializes the DropTarget for the element defined by target.
     * 
     * @param {string | HTMLElement} target id or target element
     */
    constructor(target) {
        super();

        let that = this;

        this.element = (target instanceof HTMLElement) ? target : document.querySelector('#' + target);
        this.element.addEventListener('dragover', function (event) {
            that._dragover(event);
        });
        this.element.addEventListener('drop', function (event) {
            that._drop(event);
        });

        document.addEventListener('drop', DropTarget.preventDocumentDrop);
    }

    /**
     * Internal dragover handling.
     * 
     * @private
     * @param {event} event 
     */
    _dragover(event) {
        event.preventDefault();
        this.fire('dragover', event);
    }

    /**
     * Internal drop handling.
     * 
     * @private
     * @param {event} event 
     */
    _drop(event) {
        event.preventDefault();
        this.fire('drop', event);
    }
}