Not able to drag the image inside second mask image

Question

Here : https://codepen.io/uidesigner/pen/rPzroa , after I upload image in 1st mask image, I am able to drag the uploaded image when I try in any other part of page

But user should only be able to drag when user try inside mask image....

Issue :

I am not able to drag the uploaded image inside mask image 2....

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

.masked-imga {
  -webkit-mask-image: url(https://i.stack.imgur.com/EQpM4.png);
  mask-image: url(https://i.stack.imgur.com/EQpM4.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  display: block;
  width: 100%;
  height: 100%;
}

.masked-imgb {
  -webkit-mask-image: url(https://i.stack.imgur.com/EQpM4.png);
  mask-image: url(https://i.stack.imgur.com/EQpM4.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  display: block;
  width: 100%;
  height: 100%;
}

.minaimga,
.minaimgb {
  display: block;
  background-color: black;
  height: 500px;
}

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

<div class="minaimg masked-imga" ondragover="onDragOver(event)" ondragover="onDragOver(event)">
  <div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg">
    <div class="minaimga">
      <!-- give an id for ease of selection -->
      <img id="target_imga" alt="">

      <div></div>

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

<div class="minaimg masked-imgb" ondragover="onDragOver(event)" ondragover="onDragOver(event)">
  <div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg">
    <div class="minaimgb">
      <!-- give an id for ease of selection -->
      <img id="target_imgb" alt="">

      <div></div>

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

Udhay Titus · Accepted Answer · 2019-02-05T12:42:36.707

give different id for uploadedImg div then use this in your js

if(document.querySelector('#uploadedImg2 img'))
document.querySelector('#uploadedImg2 img').style.transform = transform;

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

.masked-imga {
  
  -webkit-mask-image: url(https://i.stack.imgur.com/EQpM4.png);
  mask-image: url(https://i.stack.imgur.com/EQpM4.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;  
  
  display: block;
  width: 100%;
  height: 100%;
}

 

.masked-imgb {
  
  -webkit-mask-image: url(https://i.stack.imgur.com/EQpM4.png);
  mask-image: url(https://i.stack.imgur.com/EQpM4.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;  
  
  display: block;
  width: 100%;
  height: 100%;
}

.minaimga,.minaimgb {
  display: block;
  background-color: black;
  height:500px;
}

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

<div class="minaimg masked-imga"   ondragover="onDragOver(event)"ondragover="onDragOver(event)" >
  <div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg">
    <div class="minaimga">
      <!-- give an id for ease of selection -->
      <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">
      <!-- give an id for ease of selection -->
      <img id="target_imgb"  alt="">

      <div></div>

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

Thanks, i checked your snippet, but when i drag `uploaded image` in `1st mask`, in `2nd mask` also `image is draggging`...... please check snippet in `full page` mode..... — , Feb 05 '19 at 12:37
Hi, After i used your solution, i got [this issue](https://stackoverflow.com/questions/54548573/dragging-in-one-image-leading-to-drag-the-other-image) , please check & help me for that..... — , Feb 06 '19 at 09:27

Not able to drag the image inside second mask image

1 Answers1