div重叠时不应用事件停止传播

Question

当我同时上传两个蒙版的图像和拖动下面图像的B部分时，比C和D部分还要拖动，但是这不应该发生.....，因为 AB 部分在一个div中，而 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文件用作剪切路径，并完全跳过掩码。