customDroppableCustomAttribute.js

import { inject } from 'aurelia-framework';

@inject(Element)
export class CustomDroppableCustomAttribute {
  
  constructor(Element) {
    this.element = Element;
  }
  
  attached() {
    this.element.addEventListener('dragstart', this.enableDropzones);
    this.element.addEventListener('dragenter', this.enableDropzones);
    this.element.addEventListener('dragend', this.disableDropzones);
    this.element.addEventListener('dragleave', this.disableDropzones);
  }
  
  detatched() {
    this.element.removeEventListener('dragstart', this.enableDropzones);
    this.element.removeEventListener('dragenter', this.enableDropzones);
    this.element.removeEventListener('dragend', this.disableDropzones);
    this.element.removeEventListener('dragleave', this.disableDropzones);
  }
                                  
  enableDropzones(event) {
    // do what you do
  }
  
  disableDropzones(event) {
    // stop doing it
  }
}

form.html

<template>
  <row custom-droppable>
    <field name="name" custom-draggable></field>
    <field name="produkt" custom-draggable></field>
  </row>
  <row custom-droppable></row>
</template>

rowCustomElement.js

// This is an alternative method that scopes the event aggregator

import { NewInstance, inject } from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';

// Injecting a new instance of the event aggregator will prevent events from bubbling
// above this element, enabling you to scope events from children within this particular
// element. I recommend against this as you can typically achieve a better scoping pattern
// using native events. The event aggregator is best used for highly decoupled,
// application-wide eventing.
@inject(NewInstance.of(EventAggregator))
export class RowCustomElement {
  
  constructor(EventAggregator) {
    this.ea = EventAggregator;
  }
}