drag and drop generate html template on drop

Question

i have created a draggable directive like this

@Input('makeDraggable') data: any;
  @Output() droppedDrag: EventEmitter<any> = new EventEmitter();

  constructor(private _elementRef: ElementRef) {}

  ngOnInit() {
    // Get the current element
    let el = this._elementRef.nativeElement.querySelector('li');

    // Set the draggable attribute to the element
    el.draggable = 'true';

    // Set up the dragstart event and add the drag-src CSS class
    // to change the visual appearance. Set the current todo as the data
    // payload by stringifying the object first
    el.addEventListener('dragstart', (e) => {
      console.log('Start');

      el.classList.add('drag-src')
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text', this.data);
      this.droppedDrag.emit(e);
    });

    // Remove the drag-src class
    el.addEventListener('dragend', (e) => {
      e.preventDefault();
      el.classList.remove('drag-src');
    });

and droppable directive like this

@Output() dropped: EventEmitter<any> = new EventEmitter();

  constructor(private _elementRef: ElementRef) {}

  ngOnInit() {
    let el = this._elementRef.nativeElement;

    // Add a style to indicate that this element is a drop target
    el.addEventListener('dragenter', (e) => {
      el.classList.add('over');
    });

    // Remove the style
    el.addEventListener('dragleave', (e) => {
      el.classList.remove('over');
    });

    el.addEventListener('dragover', (e) => {
      if (e.preventDefault) {
        e.preventDefault();
      }

      e.dataTransfer.dropEffect = 'move';
      return false;
    });

    // On drop, get the data and convert it back to a JSON object
    // and fire off an event passing the data
    el.addEventListener('drop', (e) => {
      if (e.stopPropagation) {
        e.stopPropagation(); // Stops some browsers from redirecting.
      }

      el.classList.remove('over');
      let data = JSON.parse(e.dataTransfer.getData('text'));
      this.dropped.emit(data);
      return false;
    })
  }

When i drop to the same element only the droppable directive is getting fired. I want to fire the droppable directive when i drop the element on another element a textarea. How to do it??