Method _mouseEnter

src/dd-droppable.ts:84–109

@internal called when the cursor enters our area - prepare for a possible drop and track leaving

(e: MouseEvent)

  /** @internal called when the cursor enters our area - prepare for a possible drop and track leaving */
  protected _mouseEnter(e: MouseEvent): void {
    // console.log(`${count++} Enter ${this.el.id}`); // TEST
    if (!DDManager.dragElement) return;
    // During touch drag operations, ignore real browser-generated mouseenter events (isTrusted:true) vs our simulated ones (isTrusted:false).
    // The browser can fire spurious mouseenter events when we dispatch simulated mousemove events.
    if (DDTouch.touchHandled && e.isTrusted) return

    if (!this._canDrop(DDManager.dragElement.el)) return;
    e.preventDefault();
    e.stopPropagation();
    DDManager.dragElement._stopScrolling();

    // make sure when we enter this, that the last one gets a leave FIRST to correctly cleanup as we don't always do
    if (DDManager.dropElement && DDManager.dropElement !== this) {
      DDManager.dropElement._mouseLeave(e as DragEvent, true); // calledByEnter = true
    }
    DDManager.dropElement = this;

    const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dropover' });
    if (this.option.over) {
      this.option.over(ev, this._ui(DDManager.dragElement))
    }
    this.triggerEvent('dropover', ev);
    this.el.classList.add('ui-droppable-over');
    // console.log('tracking'); // TEST
  }

  /** @internal called when the item is leaving our area, stop tracking if we had moving item */
  protected _mouseLeave(e: MouseEvent, calledByEnter = false): void {