title: Angular 2 - Drag & Drop call back functions
body: <p><strong>Plunker: <a href="https://plnkr.co/edit/uZ8mvu6a1LXAsBBY3Shd?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/uZ8mvu6a1LXAsBBY3Shd?p=preview</a></strong></p>
  
  <p>In the top part I has ‘widgets’ : ‘Text a’ and ‘Text b’ that you can drag and drop.</p>
  
  <p>Below widgets you got two rows with widgets already inside.
  I've a </p>
  
  <ul>
  <li>Block  containers    
  
  <ul>
  <li>Block row ( the blue background)       
  
  <ul>
  <li>Block column  (the pink background)             
  
  <ul>
  <li>Block ( the red background)</li>
  </ul></li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>basically like a Bootstrap grid.</p>
  
  <p>1) When I drag the 'text a’ widget over the red block, the widget gets added but i don’t get the callback <strong>‘onDragEnter’</strong> function called. I get only in the console.log  <strong>onDropSucces</strong>s.</p>
  
  <p>I would like to get a call back when I drag the widget over the container, row, column and block so that I could add logic.</p>
  
  <p>I tried adding my functions, but doesn't work and can't figure out where the mistake is.</p>
  
  <p>I hope some can help to figure this one.</p>
  
  <pre><code>  //Drag functions
  
          drop(item){
              alert('dropped')
              console.log('dropping event', item)
                  var target = item.mouseEvent.target,
                    index;
  
                  if(target.classList.contains('row')) {
                      index = target.getAttribute('data-index');
                  }
  
                  if(target.classList.contains('item') &amp;&amp; target.parentNode.classList.contains('row')) {
                      index = target.parentNode.getAttribute('data-index');
                  }
  
                  if(index) {
                      console.log(this.containers);
                      console.log(this.containers[index]);
                      this.containers[index].widgets.push( item.dragData);
                  } else {
                      this.containers.push([ item.dragData]);
                  }
           }
           onDropSuccess(widget: any, event: any, objecType: string) {
              console.log('dropped on ', objecType)
              if( objecType == 'row'){
                  console.log('dropped on', objecType)
              }
              else if(objecType == 'block'){
                  console.log('dropped on ', objecType)
              }
              this.dragOperation = false;
              console.log('onDropSuccess x', widget, event);
  
              console.log('containers', this.containers)
           }
  
           onDragStart(widget: any, event: any) {
              console.log('onDragStart', widget, event);
           }
  
           onDragEnter(widget: any, event: any) {
              alert('entered ')
              console.log('onDragEnter', widget, event);
              console.log('drag enter containers', this.containers)
           }
  
             chicken(event) {
              console.log('onDragEnter chicken', event);
  
           }
  
           onDragSuccess(widget: any, event: any) {
              console.log('onDragSuccess', widget, event);
           }
  
           onDragOver(widget: any, event: any) {
              console.log('onDragOver', widget, event);
           }
  
           onDragEnd(widget: any, event: any) {
              console.log('onDragOver', widget, event);
           }
           onDragLeave(widget: any, event: any) {
              console.log('onDragLeave', widget, event);
           }
  
           onMouseDown(){
              this.dragOperation = true;
              console.log('mouse down');
           }
  
           onMouseUp(event: any){
              console.log(event);
              this.dragOperation = false;
           }
  </code></pre>