拖动一张图像会拖动另一张图像

当我拖动上传图片的右侧部分在 mask1 中，比 mask2 中上传的图像正在拖动，但这不应该发生......

Here is 视频链接

另外，如果我仅在蒙版 1 中上传图像并尝试拖动，图像将会消失，但如果我在两个蒙版中上传图像，则图像不会消失

视频链接2

代码笔：https://codepen.io/kidsdial/pen/PVJQrz

<input type="file" id="fileupa" />
<input type="file" id="fileupb" />

<div class="container">

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

<style>

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

.masked-imga

{

  -webkit-mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart1.png);
  mask-image: url(http://139.59.24.243/ecom1/site/test/images/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(http://139.59.24.243/ecom1/site/test/images/heart2.png);
  mask-image: url(http://139.59.24.243/ecom1/site/test/images/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;
}

</style>


<script>

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

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




</script>

Edit

是因为这两个图像水平和垂直重叠吗？

Edit 2

对于某些人来说，问题仍然不清楚，在下图中，如果用户尝试拖动 B 部分，则 B 部分、C 部分和 D 部分也会拖动，但这种情况不应该发生......

这是我的解决方案。您必须跟踪哪个元素开始拖动。

HTML

<input type="file" id="fileupa" />
<input type="file" id="fileupb" />

<div class="container">

<div class="minaimg masked-imga"   ondragover="onDragOver(event)"ondragover="onDragOver(event)" >
  <div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg">
    <div class="minaimga">
      <div id="dragBox1" class="dragFromHere" style="left:70px;top:120px;"></div>
      <img id="target_imga"  alt="">

      <div></div>

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

<div class="minaimg masked-imgb" ondragover="onDragOverSec(event)" ondragover="onDragOver(event)" ondragend="dragEnd()">
  <div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg2">
    <div class="minaimgb">
      <div id="dragBox2" class="dragFromHere" style="left:160px;top:160px;"></div>
      <img id="target_imgb"  alt="">

      <div></div>

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

</div>

JS

var elemInDrag = null;
var canInitdrag = false;

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 dragEnd() {
  elemInDrag = null; 
  canInitdrag = false;
}

function onDragStart(evt) {
  var x = evt.clientX, y = evt.clientY;
  var divRect1 = document.getElementById('dragBox1').getBoundingClientRect();
  var divRect2 = document.getElementById('dragBox2').getBoundingClientRect();

  if (event.clientX >= divRect1.left && event.clientX <= divRect1.right &&
      event.clientY >= divRect1.top && event.clientY <= divRect1.bottom) {
      // Mouse is inside element.
      canInitdrag = true;
    }

  if (event.clientX >= divRect2.left && event.clientX <= divRect2.right &&
      event.clientY >= divRect2.top && event.clientY <= divRect2.bottom) {
      // Mouse is inside element.
       canInitdrag = true;
    }
  if (canInitdrag) {
  if ((typeof evt.target.id!='undefined') || (evt.target.id==elemInDrag)){
    elemInDrag = evt.target.id;
  if (evt.dataTransfer && evt.dataTransfer.setDragImage) {
    evt.dataTransfer.setDragImage(evt.target.nextElementSibling, 0, 0);
  }
  prevX = evt.clientX;
  prevY = evt.clientY;
  }
  }
}

function onDragOver(evt) {
  if ((typeof evt.target.id!='undefined') && (evt.target.id==elemInDrag)){
  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) {
  if ((typeof evt.target.id!='undefined') && (evt.target.id==elemInDrag)){
  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;
}

CSS

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

.masked-imga

{

  -webkit-mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart1.png);
  mask-image: url(http://139.59.24.243/ecom1/site/test/images/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;

}

.dragFromHere {
  border:thin;
  border-style:dotted;
  border-color:red;
  display:inline-block;
  width:80px;
  height:80px;
  position:absolute;
  z-index:99;
  pointer-events:none;
}


.masked-imgb 
{

  -webkit-mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart2.png);
  mask-image: url(http://139.59.24.243/ecom1/site/test/images/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;
}

这样，拖动仅适用于您开始拖动操作的图像，并且当您跨过该区域时，它不会涉及其他元素。

将其与 CSS 剪辑路径相结合以排除两个图像的重叠，您将解决内角的问题。

EDIT：现在只能从红色方块内部启动拖动。这些是元素不重叠的“安全区域”。必须为所使用的每个蒙版图像组合定义安全区域。