Drag to Replace Image

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.min.js"></script>
<div id="img-list">
><img draggable="true" src="https://i.postimg.cc/0Qczw1QF/pexels-pixabay-97082.jpg" width="100"/>
<img src="https://i.postimg.cc/wBkvCYhM/pexels-tae-fuller-1141853.jpg" width="100"/>
<img id="drag1" src="https://i.postimg.cc/wBkvCYhM/pexels-tae-fuller-1141853.jpg" draggable="true" ondragstart="drag(event)" width="100">
</div>
<canvas id="c" width="400" height="400" class="c" ondrop="drop(event)" ondragover="allowDrop(event)"></canvas>

CSS

canvas {
  border: 1px solid grey;
  display: inline-block;
}

#img-list {
  display: flex;
  flex-direction: row;
}

#img-list img {
  padding: 5px;
}

JavaScript

var canvas = new fabric.Canvas('c');

var image1 = "https://i.postimg.cc/0Qczw1QF/pexels-pixabay-97082.jpg";
var image2 = "https://i.postimg.cc/wBkvCYhM/pexels-tae-fuller-1141853.jpg";

canvas.on({
  'drop': function(e) {
    e.dataTransfer.dropEffect = "copy";
    console.log(e);
  },
  'mouse:over': function(e) {
    console.log(e.target);
  }
});

fabric.Image.fromURL(image1, function(img) {
  img.set({
    left: 10,
    scaleX: 0.5,
    scaleY: 0.5,
    top: 10
  }, {
    crossOrigin: 'anonymous'
  });


  canvas.add(img);
});

function allowDrop(e) {
  e.preventDefault();
}

function drag(e) {
console.log(e);
  e.dataTransfer.setData("src", e.target.id);
}

function drop(e) {
  e.preventDefault();
  var data = e.dataTransfer.getData("text");
  e.target.appendChild(document.getElementById(data));
}