Dragging one image makes other image to drag

Question

When i drag the right part of uploaded image in mask1 , than uploaded image in mask2 is dragging, but that should't happen....

Here is video link

Also if i upload image only in mask 1 and try to drag, the image will disappear , but if i upload images in both masks, than image will not disappear

video link2

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

Is it because those two images overlapped horizontally & in vertically?

Edit 2

For some the question is still not clear, In below images , If user try to drag part B , along with part B , Part C & Part D also dragging, but that should't happen.....

Two elements (masked-imga and masked-imgb) overlap each other in a specific area, which triggers drag event for both of them. — Wolvington, Feb 06 '19 at 08:39
You are right, but how to solve this? is there any code hack for this ? any ugly way ? — , Feb 08 '19 at 06:25
@vickeycolors look at [`event.stopPropagation()`](https://api.jquery.com/event.stoppropagation/) — Barkermn01, Feb 10 '19 at 15:23
@MartinBarker followed `event stoppropogation` as here : https://codepen.io/kidsdial/pen/OdwWQo & still not working..... can you please check once.... — , Feb 13 '19 at 10:06

Merak Marey · Accepted Answer · 2019-02-11T20:34:38.443

Here's my solution. You must keep track which element started the drag.

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

This way, drag only will work on the image you started the drag operation, and it will not involve the other element when you step over the area.

Combine this with the CSS clip path to exclude the overlaping of the two images and you will have solved the issue of the inner corners.

EDIT: Now the dragging can only be initiated from inside the red squares.Those are the "safe zones" where the elements do not overlap. The safe zones must be defined for each combination of masks images used.

i am using css mask, not clip-path...... also i checked your answer if codepen, i try to drag the uploaded image[right part] in mask1, than its not dragging, instead uploaded image in 2nd mask is dragging..... but what i need is `if i drag uploaded image in mask1, than only that image should drag...... same for 2nd one also...... — , Feb 10 '19 at 14:59
I added css to your html & javascript code : https://codepen.io/kidsdial/pen/GzxwYV , here is result in video : https://drive.google.com/file/d/1Db__i4iMbFqBlT9gshS0mGLp1vz0DGYb/view please check & help me for this..... — , Feb 11 '19 at 05:28
I have [images like this link](http://139.59.24.243/ecom1/site/test/images/ice.png) , how i can apply css clip-path for those images ? — , Feb 11 '19 at 05:28
Lets do this in parts. First, you needed that after initiating the dragging on one element, it would not drag the second element. The solution does that. Now, another issue you have is the overlapping of the elements, like you show on the images you uploaded. Now, your second problem is to only initiate the dragging if the initial click is inside the heart shapes, whether heart 1 or 2. — Merak Marey, Feb 11 '19 at 11:18
IF you really require to allow the entire heart area to be "clickable" you should define an overlay created by a SVG element, since its the only way to create irregular shaped elements in HTML. Another alternative would be to define an area inside the hearts indicating the users where the initial click for dragging should start. Is up to you to choose the solution. — Merak Marey, Feb 11 '19 at 11:18
sorry , i really don't have much idea on both solutions, i will use whichever you suggest.... but i don't have option to change the mask image.... i need to use png image only [images gave by client ] , i cant use svg image..... — , Feb 11 '19 at 11:23
can you please update answer with code, so that if it works for this current issue, i will try for all thousands of mask images...... — , Feb 11 '19 at 11:25
I just edited my answer. Now the drag can only be initiated from inside the red squares, which are positioned where the elements don't overlap. — Merak Marey, Feb 11 '19 at 20:35
I am sorry to say this solution is rejected by our client..... because once user drag outside the `red box` in [codepen](https://codepen.io/kidsdial/pen/PVegBz), again user can't drag the image : https://drive.google.com/file/d/1dRei8XJhtFeAMWahnrImoX8cuuMQW-VA/view — , Feb 12 '19 at 05:28
How to achieve this with svg ? can you please guide me on this ? — , Feb 14 '19 at 07:03
i solved this using clip-path : https://codepen.io/kidsdial/pen/OdozOG, but i have thousands of mask images, its not possible to create clip-path for all those mask images, please give me some generic solution.... — , Feb 14 '19 at 13:00
There is not a generic solution for that. However, there may be a way so solve it. Basically you need the clip-paths for any image, and based on your examples I assume your images are like the heart2.png, a black and white png, correct?..so, what you need is something that can dynamically generate the path based on the image. You need to travel through the borders of the image and generate the coords for the clip-path. Not an easy task, I may say, maybe you can hire someone to do it? :) I doubt someone here will do it for you, since its a bit complex. — Merak Marey, Feb 15 '19 at 12:47
okay Means every time i need to upload the image here : https://bennettfeely.com/clippy/ or http://www.cssplant.com/clip-path-generator & than get the clip-path of the image and add that path in my code, thats the only option right ? i need to do the same for all thousand images ? — , Feb 15 '19 at 12:49
is it possible to get generic solution through masks, svg, inkspace ? or its not possible at all ? or it is very complex ? — , Feb 15 '19 at 12:53
Well, those two sites you mentioned, they will not do the work for you, you will have to define the clip path by hand. No, my idea is to create a program than can take an white and black image, and then using the borders of the white shape (heart, dog or whatever) it can AUTOMATICALLY generate the clip-path for that image..Its not easy, I can assure you that...not impossible either...and it would be the perfect solution since the only thing you would need to do is to upload a black & white image with the shape you want to get and the script would generate the path automatically... — Merak Marey, Feb 15 '19 at 15:09
Sorry for delay, here is solution : https://codepen.io/AlenToma/pen/WPPyLe , but now i am struggling for [zooming those image here](https://stackoverflow.com/questions/55652733/zoom-the-user-uploaded-image-onclick-button) — , Apr 26 '19 at 13:47

score 0 · Answer 2 · answered Feb 06 '19 at 08:26

Why are you defining the ondragover attribute twice? In any case, after defining onDragOverSec, you are later rewriting it as onDragOver, thereby triggering the event handler that you are using for the first element.

<div class="minaimg masked-imgb"   ondragover="onDragOverSec(event)"ondragover="onDragOver(event)" >

As a side note, this code could be rewritten to be be more DRY, by passing the differences between the two cases as variables to the same function, rather than two copies of each function

if there is more space between 2 masks, than this is not happening : https://codepen.io/kidsdial/pen/ErweyK — , Feb 06 '19 at 10:05

Wolvington · Answer 3 · 2019-02-08T08:47:50.803

0

You can use CSS clip-path property to cut off HTML element corners as you want. It's easy to get right value via tool, please google 'css clip-path maker'.

.masked-imga
    -webkit-clip-path: polygon(0 9%, 0 0, 35% 0%, 49% 0, 56% 27%, 73% 46%, 100% 61%, 100% 100%, 65% 100%, 0 100%, 0 100%, 0 30%);
    clip-path: polygon(0 9%, 0 0, 35% 0%, 49% 0, 56% 27%, 73% 46%, 100% 61%, 100% 100%, 65% 100%, 0 100%, 0 100%, 0 30%);

.masked-imgb
    -webkit-clip-path: polygon(0 9%, 0 0, 35% 0%, 100% 0, 100% 0, 100% 0, 100% 61%, 100% 100%, 58% 100%, 40% 90%, 18% 63%, 0 39%);
    clip-path: polygon(0 9%, 0 0, 35% 0%, 100% 0, 100% 0, 100% 0, 100% 61%, 100% 100%, 58% 100%, 40% 90%, 18% 63%, 0 39%);

edited Feb 08 '19 at 08:47

answered Feb 08 '19 at 08:32

Wolvington

1
2

Thanks , But i have thousands of mask images..... Do i need to use this for all thousands of mask images ? – Feb 08 '19 at 09:03
Then it will be completely different solution. For example, you can have a bit different background colors of mask images (#ffffff and #fffffe), then you can get info from click event, what mask was clicked, and according to that info fire needed drag event. – Wolvington Feb 08 '19 at 09:08
i have [images like these](http://139.59.24.243/ecom1/site/test/images/ice.png) , how to generate clip paths for this type of images ? – Feb 08 '19 at 09:13
i have to use the same mask images gave by client..... i dont have any other option..... – Feb 08 '19 at 09:15
Instead of using different `background colors in mask image`, can i use different `background colors for each masks through css code` ? will that work ? based on background-colors, i need to use dragging...... – Feb 08 '19 at 13:19
is svg will help me ? – Feb 14 '19 at 07:02
i solved this using clip-path : https://codepen.io/kidsdial/pen/OdozOG, but i have thousands of mask images, its not possible to create clip-path for all those mask images, please give me some generic solution.... – Feb 14 '19 at 13:01
Sorry, I have no time no make an app for you. Try to create a new topic on Stack Overflow, because it is a different problem – Wolvington Feb 14 '19 at 13:21
no, i need guidance from you...... instead of clip-path, can i make same through mask ? is it possible to find generic solution ? – Feb 14 '19 at 13:23
You want an app, where user can view an image after merging two images below two different silhouettes, right? – Wolvington Feb 15 '19 at 09:51
No, all i need is drag the `uploaded image in mask1` without touching `uploaded image` in mask2...... – Feb 15 '19 at 09:52
I must have 20 reputation to write there. My idea is to make app with 3 states: edit-img-a, edit-img-b, not editable. But here is bad place to illustrate my idea without screenshots – Wolvington Feb 15 '19 at 10:32

cieunteung · Answer 4 · 2019-02-10T07:03:25.570

Because the elements overlap each other I think the best way to fix is by setting the z-index. its not perfect, when switched between element you have first to drag the element that not overlapped.

fileupa.onchange = e => {
  target_imga.src = URL.createObjectURL(fileupa.files[0]);
  // set z-index
  document.querySelector(".masked-imga").style = 'z-index: ' + zIndex++;
}

fileupb.onchange = e => {
  target_imgb.src = URL.createObjectURL(fileupb.files[0]);
  // set z-index
  document.querySelector(".masked-imgb").style = 'z-index: ' + zIndex++;
}

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

let zIndex = 1;

function onDragStart(evt) {
  // set z-index of the parent element
  evt.target.closest(".minaimg").style = 'z-index: ' + zIndex++;

  if (evt.target.nextElementSibling && // fix if .nextElementSibling is not element
    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;
}

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

.masked-imga {
  -webkit-mask-image: url(https://i.postimg.cc/y8T0y7zY/heart1.png);
  mask-image: url(https://i.postimg.cc/y8T0y7zY/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(https://i.postimg.cc/xdTMsB0G/heart2.png);
  mask-image: url(https://i.postimg.cc/xdTMsB0G/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;
}

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

<div class="container">
  <div class="minaimg masked-imga" 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 id="masked_imgb"  class="minaimg masked-imgb" ondragover="onDragOverSec(event)">
    <div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg2">
      <div class="minaimgb">
        <img id="target_imgb" alt="">
        <div></div>
      </div>
    </div>
  </div>
</div>

demo image

Thanks for reply , we are giving dragging option to users.... So it's really not possible to tell to users to drag the first image or second image.... They can drag whichever they want!.... — , Feb 09 '19 at 09:10
Yes, i tried your solution.... they can drag both images, but if user drag right part of 1st image, than 2nd image is dragging..... but both should be independent...... means if i drag uploaded image in mask1, than only 1st image should drag...... same for 2nd one also..... Here is your code snippet video link : https://drive.google.com/file/d/1OolS-dJ1Nl4pcOGASQIgoCkU06itgGqP/view — , Feb 11 '19 at 05:09
sorry, its really not possible to tell users that `don't switch between elements` , they can do however they want....... — , Feb 11 '19 at 05:10
I don't talk like that, see [this image](https://postimg.cc/PCxMZbb9) What was I mean is, to able drag area `B` I need to drag area `A` first. this is better than I cannot drag area `B` at all. — cieunteung, Feb 11 '19 at 07:32
I got what you said..... sorry , we can't tell users to `drag Area A , than after drag Area B`..... users may just upload image & start dragging Area B..... — , Feb 11 '19 at 07:40
i added your code in codepen : https://codepen.io/kidsdial/pen/xMWBXp , there is one more issue is that : if we drag the left part of 2nd image, than 1st image is dragging...... please check video here : https://drive.google.com/file/d/1-577uOUk-gSJzBE7qYDzce06V9tzCDYf/view — , Feb 11 '19 at 07:48
see [this image](https://postimg.cc/CdmQBsWT) we need to click area `D` first. the logic, usually when user fail to drag area `B or C` they will try to drag `A or D` then back dragging `B or C` so you don't need to tell them. — cieunteung, Feb 11 '19 at 08:00
Thanks for all those `ABCD` images.....The main problem is when user drag `B` part , along with `B` part `C&D` part also moving.... but when user Drag `B` part, it should move only `B` Part..... — , Feb 11 '19 at 09:12
your solution will work if user Drag in this order : `DCAB`, but user drag in this order : `BAC` your solution don't work..... — , Feb 11 '19 at 09:24
so using z-index, we can't solve this, right ? is there any other way ? — , Feb 12 '19 at 05:45
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/188255/discussion-between-vickey-colors-and-cieunteung). — , Feb 12 '19 at 07:20
Thanks for your valuable time, i tried in different way & i got solution from [this link](https://stackoverflow.com/questions/54767885/dragging-only-in-some-part-of-image) — , Feb 20 '19 at 07:05
I don't see different solution with my answer except the canvas, it still use `z-index` and need to drag `A or D` to activate `B or C` but I'm glad if it working for you. — cieunteung, Feb 20 '19 at 08:09

score 0 · Answer 5 · answered Feb 09 '19 at 14:46

I think this is what you are looking for:

Code Pen

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;
let current_elm = null;

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

function dragEnd(event) {
  current_elm=null;
}

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(current_elm != null) current_elm.style.transform = transform;
}

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

.masked-imga {
  -webkit-mask-image: url(https://i.postimg.cc/y8T0y7zY/heart1.png);
  mask-image: url(https://i.postimg.cc/y8T0y7zY/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(https://i.postimg.cc/xdTMsB0G/heart2.png);
  mask-image: url(https://i.postimg.cc/xdTMsB0G/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;
}

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

<div class="container" ondragover="onDragOver(event)" >

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

  <div class="minaimg masked-imgb">
    <div draggable="true" ondragstart="onDragStart(event)" ondragend="dragEnd(event)" id="uploadedImg2">
      <div class="minaimgb">
        <img id="target_imgb" alt="">
        <div></div>
      </div>
    </div>
  </div>

</div>

Here I just define ondragover on the .container div which is the container of both images. and also inside of the onDragStart function, I save the current dragged element into current_elm so that on the another call of onDragStart no thing happen until current_elm become null(if it is not null then it means that there is already another element which is dragging so we should not consider new element to drag.) and also in the dragEnd callback function, we should set current_elm to null to enable new dragging process if it is needed(I hope you understand what I mean ;).) another advantage of current_elm is that there is no need to define two type of updateStyle function because you can update relevant element using current_elm.

Let me know if more explanation is needed.

Thanks for codepen, when i try to drag the uploaded image[right part] in mask1, than its not dragging, instead uploaded image in 2nd mask is dragging..... but what i need is `if i drag uploaded image in mask1, than only that image should drag...... same for 2nd one also...... — , Feb 10 '19 at 14:39
Here is your code snippet's video link https://drive.google.com/file/d/1wt8jol1RLFnic904EIraqG4Al3RklZVu/view Please check & help me for this.... — , Feb 11 '19 at 05:18
@vickeycolors, I got your point but unfortunately for now I have no Idea to overcome this issue. — pouyan, Feb 11 '19 at 10:19
Thanks for reply, is [event.stoppropogation](https://api.jquery.com/event.stoppropagation/) or z-index will help me ? — , Feb 11 '19 at 10:22
Also can you please check [link](https://stackoverflow.com/questions/54568357/dragging-should-happen-with-respect-to-image-not-with-respect-to-image-dimensio) , if i get solution for that , may be this issue will also solve, right ? — , Feb 11 '19 at 10:24
so basically what you are telling is we should finish the dragging in mask1 first, than we need to finish the dragging mask2 .... but if we again touch mask1 , problem will occur..... — , Feb 11 '19 at 10:28
I don't think the approaches that you have mentioned could help you for this problem. I will check your link and leave a message about that. — pouyan, Feb 11 '19 at 10:28
@vickeycolors, sorry for late response, I'm so busy these days. I checked the link(it is delete now) it was exactly your problem here. your problem is that the `div` that contains each of your images are overlapping(because they are not shaped according to your masks.) but unfortunately I have no Idea about overcoming this issue. — pouyan, Feb 13 '19 at 12:54
Thanks a lot for response, do you have any idea with `mask , clip, svg or inkscape` ? — , Feb 13 '19 at 12:56
Also here is [working link](https://stackoverflow.com/questions/54665051/users-can-drag-the-image-by-dragging-outside-the-mask-image) — , Feb 13 '19 at 12:56
I don't think that `clip` and `mask` help you and also I'm not familiar with `inkscape`. but I hope you would be able to solve your problem using `svg`. I think it could help you but you will need to search more. — pouyan, Feb 13 '19 at 13:36

Dragging one image makes other image to drag

5 Answers5

Linked