перетаскиваемые элементы меняют изображения

Question

У меня есть следующее изображение, см. В приложении.

Пользователь перетаскивает изображение из боковой панели и получает изображение # 2.

См. Изображение № 2 ниже:

Мне бы хотелось, чтобы пользователь начал перетаскивать изображение, чтобы перетаскиваемое изображение стало другим изображением.

Как я могу сделать это с помощью JavaScript?

Вот что я попробовал:

this.btnSectionPicker$.on('dragstart', function(event) {
  dragged = event.currentTarget;
  this.dropTarget$ = null;
  this.sectionSelected = dragged.id;
  // make it half transparent

  var crt = this.cloneNode(true);
  crt.style.backgroundColor = "#F2F4F5";
  crt.style.position = "absolute";
  crt.style.boxShadow = "3px 6px #000";
  crt.style.top = "0px";
  crt.style.left = "-900px";
  document.body.appendChild(crt);
  event.dataTransfer.setDragImage(crt, 0, 0);

}.bind(this));