How to do drag and drop for a tree control in aurelia?

Question

I am currently trying to write a tree control and I have the following custom attributes (draggable and dropplable): Draggable is as follows:

@customAttribute('draggable')
@inject(Element)
export class Draggable {
   constructor(element) {
   this.element = element;
}

valueChanged(newValue){
   var el = this.element;
   el.draggable = true;
   el.addEventListener('dragstart', function(e) {
     e.dataTransfer.effectAllowed = 'move';
           // etc.
     if (e.stopPropagation)
       e.stopPropagation();
     return false;
   }, false);
   el.addEventListener('dragend', function (e) {
    this.classList.remove('drag');
    return false;
   }, false);
 }
}

etc. From the droppable attribute I was thinking about a pub/sub mechanism where a view model will pick up the drop and add the data to the tree array.

Is this the best way to do this in aurelia or can I follow some other technique? I guess in angularjs I would do it this way or via the rootscope of the tree.

What are my options?