Angular2 interact find target DOM

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/tools/traceur-runtime.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="config.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.46/angular2.min.js"></script>
    <script src="//cdn.jsdelivr.net/interact.js/1.2.6/interact.min.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    </my-app>
  </body>

</html>

/* Styles go here */

#toBeDragged{
  border: 1px solid black;
  width :50%;
  text-align: center;
}

.dropzone{
  border:1px solid red;
  width:100%;
  height:500px;
}

my-component-tag {
  display: block;
  border: solid 1px gray;
  margin: 1em;
  padding: 0.5em;
  cursor: move;
  background-color: #EEE;
}

### Angular2 load component Plunker - Typescript - Alpha .44

A simple plunker demonstrating Angular2 component load demo

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

//main entry point
import {bootstrap, ELEMENT_PROBE_PROVIDERS} from 'angular2/angular2';
import {App} from './app';
import {Interactjs} from './Interactjs';

bootstrap(App, [Interactjs, ELEMENT_PROBE_PROVIDERS])
  .catch(err => console.error(err));

//our root app component
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';
import {Interactjs} from './Interactjs';
import {MyComponent} from "./MyComponent";

@Component({
  selector: 'my-app'
})
@View({
  template: `<div class="dropzone"><my-component-tag *ng-for="#c of childComponents"></my-component-tag></div>`,
  directives: [CORE_DIRECTIVES, MyComponent]
})
export class App {
  
  // This is to simulate a list of components with their own properties
  childComponents = ['one', 'two', 'three'];
  
  constructor(private interactjs:Interactjs) {
  }
}

declare var interact:any;

import {Injectable} from 'angular2/angular2';

@Injectable()
export class Interactjs {
	constructor() {
	  this.initDropZone();
	}
	
	
	// === Important code here ===
	// Key handlers for drag and drop events
	
	onDragEnterHandler(event:any) {
		console.log("Dragging '", event.relatedTarget.outerText, "' over '", event.target.outerText, "' - ondragenter event:", event);
		
		console.log("Target element count", ng.probe(event.target).componentInstance.count);
		
	}
	
	onDropHandler(event:any) {
		console.log("Dropping '", event.relatedTarget.outerText, "' on '", event.target.outerText, "' - ondrop event:", event);
		
		console.log("Target element count", ng.probe(event.target).componentInstance.count);
		
	}
	
	// === end ===
	
	
	
	
	// InteractJS configuration

	initDropZone():void {
	
		interact('my-component-tag').dropzone({
			ondragenter: this.onDragEnterHandler,
			ondrop: this.onDropHandler,
			accept: 'my-component-tag',
			overlap: 0.1
		});
		
		interact('my-component-tag').draggable({
      inertia: true,
      restrict: {
        restriction: "parent",
        endOnly: true,
        elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
      },
      autoScroll: true,
      onmove: dragMoveListener
    });
  
    function dragMoveListener (event) {
      var target = event.target,
          // keep the dragged position in the data-x/data-y attributes
          x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
          y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
  
      // translate the element
      target.style.webkitTransform =
      target.style.transform =
        'translate(' + x + 'px, ' + y + 'px)';
  
      // update the posiion attributes
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    }


	}
}

// A draggable component
import {Component, View} from 'angular2/angular2';

let i = 0;

@Component({
  selector: 'my-component-tag'
})
@View({
  template: `Drag me {{count}}`
})
export class MyComponent {
  count = ++i;
}