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

I think this is what you are looking for:

Code Pen

fileupa.onchange = e => {
 target_imga.src = URL.createObjectURL(fileupa.files[0]);   
}

fileupb.onchange = e => {
 target_imgb.src = URL.createObjectURL(fileupb.files[0]);   
}

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

function onDragStart(evt) {
  if (current_elm != null) return;
  if (evt.dataTransfer && evt.dataTransfer.setDragImage) {
    evt.dataTransfer.setDragImage(evt.target.nextElementSibling, 0, 0);
    current_elm = evt.target;
  }
  prevX = evt.clientX;
  prevY = evt.clientY;  
}

function dragEnd(event) {
  current_elm=null;
}

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(current_elm != null) current_elm.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;
}

---

Here I just define ondragover on the .container div which is the container of both images. and also inside of the onDragStart function, I save the current dragged element into current_elm so that on the another call of onDragStart no thing happen until current_elm become null(if it is not null then it means that there is already another element which is dragging so we should not consider new element to drag.) and also in the dragEnd callback function, we should set current_elm to null to enable new dragging process if it is needed(I hope you understand what I mean ;).) another advantage of current_elm is that there is no need to define two type of updateStyle function because you can update relevant element using current_elm.

Let me know if more explanation is needed.