event stop propogation is not applying when divs are overlapped

Question

When i upload image for both masks & when i drag the part B of below image , than Part C & D also Dragging, but it should't happen..... because Part AB are in one div and Part CD are in another DIV or am i doing something wrong with event stoppropogation ?

video link

https://codepen.io/kidsdial/pen/OdwWQo

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;

function onDragStart(evt) {
  if (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;

  if (document.getElementById("check").checked) {
    event.stopPropagation();
  }

}

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:silver;
}

.customa {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
  position: relative;
    top: 350px;
    z-index: 1;
    left: -40px;
}

.customb {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
  position: relative;
    top: 350px;
    z-index: 1;
    left: 80px;
}

.masked-imga

{
  
  -webkit-mask-image: url(https://i.sstatic.net/VNwNC.png);
  mask-image: url(https://i.sstatic.net/VNwNC.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.sstatic.net/bdJSg.png);
  mask-image: url(https://i.sstatic.net/bdJSg.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;
}

<div class="container">

Stop propagation:
<input type="checkbox" id="check">


<label for="fileupa" class="customa">
    Upload Image
  </label>
  <input id="fileupa"  type="file" style="display:none;">
  
  
  <label for="fileupb" class="customb">
     Upload Image
  </label>
  <input id="fileupb"  type="file" style="display:none;">

<div class="minaimg masked-imga"   ondragover="onDragOver(event)"ondragover="onDragOver(event)" >
  <div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg">
    <div class="minaimga">
     
      <img id="target_imga"  alt="">

      <div></div>

    </div>
  </div>
</div>

<div class="minaimg masked-imgb"   ondragover="onDragOverSec(event)"ondragover="onDragOver(event)" >
  <div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg2">
    <div class="minaimgb">
    
      <img id="target_imgb"  alt="">

      <div></div>

    </div>
  </div>
</div>

</div>

Please let me know if you need any other information regarding this question.....

Please help me to find solution.....

Thanks in Advance....

Answer 1

First of all, instead of having two handlers for the onDragOver and the updateStyle you can just use the same and store the node that is being dragged in a variable.

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

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

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

function updateStyle() {
  if (!draggedElement) return;
  let transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;

  draggedElement.style.transform = transform;
}

This should also prevent from dragging both at the same time.

It would be even better if you could create a clip-path for each shape and use that.

See a crude approximation (made with clippy) at https://codepen.io/anon/pen/gqjWVG but you could use an SVG file for the clip-path and skip the masking altogether.