[QUESTION] Custom Component dragging issue

This is how I've created a custom component:

comps.addType('custom-video', {
  extend: 'image',
  isComponent: function (el) {
    if (el.getAttribute && el.getAttribute('element-type') === 'custom-video') {
      return {type: 'custom-video'};
    }
  },
  model: {
    defaults: {
      'video-preview-type': 'gif',
      traits: [{
        type: 'select',
        label: 'Type',
        name: 'video-preview-type',
        options: [{value: 'gif', name: 'GIF'},
          {value: 'image', name: 'Image'}],
        changeProp: 1
      }],
      selectable: true
    },
    init: function () {
      this.listenTo(this, 'change:video-preview-type', this.updateSrc);
    },
    updateSrc: function (component, value) {
      const attributes = component.attributes.attributes;
      let src;
      if (value === 'gif') {
        src = attributes['gif'];
      } else if (value === 'image') {
        src = attributes['image'];
      }
      component.view.$el.find('img').attr('src', src);
      this.set('src', src);
    }
  },
  view: {
    events: {
      dblclick: function () {
        postDoubleClickEvent(EditorEvents.VIDEO_DOUBLE_CLICK);
      }
    }
  }
});

This is my custom block:

blockManager.add('Video', {
  label: 'Video',
  content: '<a style="display: inline-block"><img element-type="vaetas-video" style="width: 400px; object-fit: cover" src="https://argoswimvideo.com/wp-content/uploads/2017/11/video-placeholder-1280x720-40.jpg"></a>',
  attributes: {
    class: 'gjs-block fa fa-film',
    title: 'Insert Video'
  }
});

The thing is that I have wrapped the image tag inside <a> tag when it is rendered to canvas. When I click on the element and try to drag it, only <img> tag gets dragged and <a> remains on it's original place.

Live demo