Распространение событий прекращается, если div перекрываются

Question

Когда я загружаю изображение для обеих масок и когда я перетаскиваю часть B изображения ниже, чем Part C & D также перетаскивает, но это не должно происходить ..... потому что Part AB в одном div и Part CD находятся в другом DIV или я делаю что-то не так с 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.stack.imgur.com/VNwNC.png);
  mask-image: url(https://i.stack.imgur.com/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.stack.imgur.com/bdJSg.png);
  mask-image: url(https://i.stack.imgur.com/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>

Пожалуйста, дайте мне знать, если вам нужна другая информация по этому вопросу .....

Пожалуйста, помогите мне найтиРешение .....

Заранее спасибо ....

Answer 1

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

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

ЭтоТакже следует избегать перетаскивания обоих одновременно.

Было бы еще лучше, если бы вы могли создать clip-path для каждой фигуры и использовать это.

См.грубое приближение ( сделано с clippy ) при https://codepen.io/anon/pen/gqjWVG, но вы можете использовать файл SVG для пути клипа и вообще пропустить маскирование.