Dragging one image makes other image to drag

Question

When i drag the right part of uploaded image in mask1 , than uploaded image in mask2 is dragging, but that should\'t happen....

Here is video link

Answer 1

Because the elements overlap each other I think the best way to fix is by setting the z-index. its not perfect, when switched between element you have first to drag the element that not overlapped.

fileupa.onchange = e => {
  target_imga.src = URL.createObjectURL(fileupa.files[0]);
  // set z-index
  document.querySelector(".masked-imga").style = 'z-index: ' + zIndex++;
}

fileupb.onchange = e => {
  target_imgb.src = URL.createObjectURL(fileupb.files[0]);
  // set z-index
  document.querySelector(".masked-imgb").style = 'z-index: ' + zIndex++;
}

let prevX = 0,
  prevY = 0,
  translateX = 0,
  translateY = 0,
  scale = 1,
  zoomFactor = 0.1;

let zIndex = 1;

function onDragStart(evt) {
  // set z-index of the parent element
  evt.target.closest(".minaimg").style = 'z-index: ' + zIndex++;

  if (evt.target.nextElementSibling && // fix if .nextElementSibling is not element
    evt.dataTransfer && evt.dataTransfer.setDragImage) {
    evt.dataTransfer.setDragImage(evt.target.nextElementSibling, 0, 0);
  }
  prevX = evt.clientX;
  prevY = evt.clientY;
}

function onDragOver(evt) {
  translateX += evt.clientX - prevX;
  translateY += evt.clientY - prevY;
  prevX = evt.clientX;
  prevY = evt.clientY;
  updateStyle();
}

function updateStyle() {
  let transform = "translate(" + translateX + "px, " + translateY + "px) scale(" + scale + ")";

  if (document.querySelector('#uploadedImg img'))
    document.querySelector('#uploadedImg img').style.transform = transform;
}

function onDragOverSec(evt) {
  translateX += evt.clientX - prevX;
  translateY += evt.clientY - prevY;
  prevX = evt.clientX;
  prevY = evt.clientY;
  updateStyleSec();
}

function updateStyleSec() {
  let transform = "translate(" + translateX + "px, " + translateY + "px) scale(" + scale + ")";

  if (document.querySelector('#uploadedImg2 img'))
    document.querySelector('#uploadedImg2 img').style.transform = transform;
}

.container {
  border: 1px solid #DDDDDD;
  width: 612px;
  height: 612px;
  position: relative;
  background: red;
}

.masked-imga {
  -webkit-mask-image: url(https://i.postimg.cc/y8T0y7zY/heart1.png);
  mask-image: url(https://i.postimg.cc/y8T0y7zY/heart1.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  width: 259px;
  height: 278px;
  position: absolute;
  top: 221px;
  left: 23px;
}

.masked-imgb {
  -webkit-mask-image: url(https://i.postimg.cc/xdTMsB0G/heart2.png);
  mask-image: url(https://i.postimg.cc/xdTMsB0G/heart2.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  width: 416px;
  height: 388px;
  position: absolute;
  top: 111px;
  left: 173px;
}

.minaimga {
  display: block;
  background-color: white;
  height: 278px;
}

.minaimgb {
  display: block;
  background-color: white;
  height: 388px;
}

demo image