Перетаскивание одного изображения приводит к перетаскиванию другого изображения

Когда я перетаскиваю правая часть загруженного изображения в маске1, загруженное изображение в маске2 перетаскивается, но этого не должно происходить....

Вот ссылка на видео

Также, если я загружу изображение только в маске 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>

Редактировать

Это потому, что эти два изображения перекрываются по горизонтали и по вертикали?

Перетаскивание одного изображения приводит к перетаскиванию другого изображения

Редактировать 2

Для некоторых вопрос все еще не ясен. На изображениях ниже, если пользователь пытается перетащить часть B вместе с частью B, часть C и часть D также перетаскивают, но этого не должно происходить.....

Перетаскивание одного изображения приводит к перетаскиванию другого изображения

Два элемента (masked-imga и masked-imgb) перекрывают друг друга в определенной области, что вызывает событие перетаскивания для них обоих.

— 06.02.2019 09:39

Вы правы, но как это решить? есть ли какой-нибудь код для этого? какой-то некрасивый способ?

— 08.02.2019 07:25

@vickeycolors посмотри на event.stopPropagation()

— 10.02.2019 16:23

@MartinBarker подписался на event stoppropogation, как здесь: codepen.io/kidsdial/pen/OdwWQo и все еще не работает..... не могли бы вы проверить один раз....

— 13.02.2019 11:06

javascript html css svg css-mask

06.02.2019 08:29

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 269

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Почему вы дважды определяете атрибут ondragover? В любом случае, после определения onDragOverSec вы позже переписываете его как onDragOver, тем самым запуская обработчик событий, который вы используете для первого элемента.

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

В качестве примечания, этот код можно было бы переписать так, чтобы он был более СУХОЙ, путем передачи различий между двумя случаями в качестве переменных одной и той же функции, а не двух копий каждой функции.

если между 2 масками больше места, чем этого не происходит: codepen.io/kidsdial/pen/ErweyK

— 06.02.2019 11:05

06.02.2019 09:26

Вы можете использовать свойство CSS clip-path, чтобы обрезать углы HTML-элемента по своему усмотрению. Легко получить правильное значение с помощью инструмента, пожалуйста, погуглите «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%);

Спасибо, но у меня есть тысячи изображений масок..... Нужно ли мне использовать это для всех тысяч изображений масок?

— 08.02.2019 10:03

Тогда это будет совсем другое решение. Например, у вас могут быть немного разные цвета фона изображений масок (#ffffff и #fffffe), тогда вы можете получить информацию из события клика, какая маска была нажата, и в соответствии с этой информацией срабатывает необходимое событие перетаскивания.

— 08.02.2019 10:08

у меня есть изображения, подобные этим, как генерировать пути клипа для этого типа изображений?

— 08.02.2019 10:13

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

— 08.02.2019 10:15

Вместо того, чтобы использовать другой background colors in mask image, могу ли я использовать другой background colors for each masks through css code? это сработает? на основе цветов фона мне нужно использовать перетаскивание......

— 08.02.2019 14:19

SVG мне поможет?

— 14.02.2019 08:02

я решил это, используя clip-path: codepen.io/kidsdial/pen/OdozOG, но у меня есть тысячи изображений масок, невозможно создать clip-path для всех этих изображений масок, пожалуйста, дайте мне какое-нибудь общее решение....

— 14.02.2019 14:01

Извините, у меня нет времени не сделать приложение для вас. Попробуйте создать новую тему на Stack Overflow, потому что это другая проблема.

— 14.02.2019 14:21

нет, мне нужно ваше руководство...... вместо clip-path, могу ли я сделать то же самое через маску? можно ли найти универсальное решение?

— 14.02.2019 14:23

Вам нужно приложение, в котором пользователь может просматривать изображение после объединения двух изображений под двумя разными силуэтами, верно?

— 15.02.2019 10:51

Нет, все, что мне нужно, это перетащить uploaded image in mask1, не касаясь uploaded image в маске2......

— 15.02.2019 10:52

У меня должно быть 20 репутации, чтобы писать туда. Моя идея состоит в том, чтобы сделать приложение с тремя состояниями: edit-img-a, edit-img-b, нередактируемое. Но здесь плохое место для иллюстрации моей идеи без скриншотов.

— 15.02.2019 11:32

08.02.2019 09:32

Поскольку элементы накладываются друг на друга, я думаю, что лучший способ исправить это установить z-index. это не идеально, при переключении между элементами вы должны сначала перетащить элемент, который не перекрывается.

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>

демонстрационное изображение

Спасибо за ответ, мы даем пользователям возможность перетаскивания.... Так что на самом деле невозможно сказать пользователям перетаскивать первое изображение или второе изображение.... Они могут перетаскивать все, что захотят!....

— 09.02.2019 10:10

Да, я пробовал ваше решение.... они могут перетаскивать оба изображения, но если пользователь перетаскивает правую часть 1-го изображения, перетаскивается 2-е изображение..... но оба должны быть независимыми...... означает, что если я перетащите загруженное изображение в маску1, тогда только 1-е изображение должно перетаскиваться...... то же самое и для 2-го..... Вот ваша ссылка на фрагмент кода: drive.google.com/file/d/1OolS-dJ1Nl4pcOGASQIgoCkU06itgGqP/vi‌ew

— 11.02.2019 06:09

извините, на самом деле невозможно сказать пользователям, что don't switch between elements , они могут делать все, что хотят .......

— 11.02.2019 06:10

Я так не говорю, см. это изображение. Я имел в виду, что для возможности перетаскивания области B мне нужно сначала перетащить область A. это лучше, чем я вообще не могу перетаскивать область B.

— 11.02.2019 08:32

Я понял, что вы сказали ..... извините, мы не можем сообщить пользователям drag Area A , than after drag Area B ..... пользователи могут просто загрузить изображение и начать перетаскивать область B .....

— 11.02.2019 08:40

я добавил ваш код в codepen: codepen.io/kidsdial/pen/xMWBXp, есть еще одна проблема: если мы перетаскиваем левую часть 2-го изображения, перетаскивается 1-е изображение..... пожалуйста, посмотрите видео здесь: drive.google.com/file/d/1-577uOUk-gSJzBE7qYDzce06V9tzCDYf/vi‌ew

— 11.02.2019 08:48

см. это изображение, нам нужно сначала щелкнуть область D. логика, обычно, когда пользователь не может перетащить область B or C, он попытается перетащить A or D, а затем обратно перетащить B or C, поэтому вам не нужно им говорить.

— 11.02.2019 09:00

Спасибо за все эти изображения ABCD..... Основная проблема заключается в том, что когда пользователь перетаскивает часть B, вместе с частью B часть C&D также перемещается.... но когда пользователь перетаскивает часть B, она должна перемещать только часть B.... .

— 11.02.2019 10:12

ваше решение будет работать, если пользователь перетаскивает в следующем порядке: DCAB, но пользователь перетаскивает в следующем порядке: BAC ваше решение не работает.....

— 11.02.2019 10:24

поэтому, используя z-index, мы не можем решить эту проблему, верно? Есть ли другой способ ?

— 12.02.2019 06:45

насколько я знаю, иначе никак.

— 12.02.2019 08:17

Давайте продолжить обсуждение в чате.

— 12.02.2019 08:20

Спасибо за ваше драгоценное время, я пробовал по-другому и получил решение от эта ссылка

— 20.02.2019 08:05

Я не вижу другого решения с моим ответом, кроме холста, он все еще использует z-index, и мне нужно перетащить A or D, чтобы активировать B or C, но я рад, если он работает для вас.

— 20.02.2019 09:09

09.02.2019 07:21

Я думаю, это то, что вы ищете:

Кодовая ручка

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>

Здесь я просто определяю ondragover в .container div, который является контейнером обоих изображений. а также внутри функции onDragStart я сохраняю текущий перетаскиваемый элемент в current_elm, чтобы при другом вызове onDragStart ничего не происходило до тех пор, пока current_elm не станет нулевым (если он не равен нулю, это означает, что уже есть другой элемент, который перетаскивается, поэтому мы не должны рассматривать новый элемент для перетаскивания.), а также в функции обратного вызова dragEnd мы должны установить current_elm значение null, чтобы включить новый процесс перетаскивания, если это необходимо (надеюсь, вы понимаете, что я имею в виду;).) еще одно преимущество current_elm что нет необходимости определять два типа функции updateStyle, потому что вы можете обновить соответствующий элемент, используя current_elm.

Дайте мне знать, если потребуется больше объяснений.

Спасибо за codepen, когда я пытаюсь перетащить загруженное изображение [правая часть] в маску1, оно не перетаскивается, вместо этого перетаскивается загруженное изображение во 2-й маске..... но мне нужно, `если я перетащу загруженное изображение в маску1 , чем только это изображение должно перетаскиваться ...... то же самое для 2-го также ......

— 10.02.2019 15:39

Вот ссылка на видео вашего фрагмента кода drive.google.com/file/d/1wt8jol1RLFnic904EIraqG4Al3RklZVu/vi‌ew Пожалуйста, проверьте и помогите мне с этим....

— 11.02.2019 06:18

@vickeycolors, я понял вашу точку зрения, но, к сожалению, пока у меня нет идеи, как решить эту проблему.

— 11.02.2019 11:19

Спасибо за ответ, мне поможет событие.stoppropogation или z-index?

— 11.02.2019 11:22

Также не могли бы вы проверить ссылка на сайт , если я получу решение для этого, может быть, эта проблема также будет решена, верно?

— 11.02.2019 11:24

так что в основном вы говорите, что мы должны сначала закончить перетаскивание в маске1, затем нам нужно закончить перетаскивание маски2 .... но если мы снова коснемся маски1, возникнет проблема.....

— 11.02.2019 11:28

Я не думаю, что подходы, которые вы упомянули, могут помочь вам в решении этой проблемы. Я проверю вашу ссылку и оставлю сообщение об этом.

— 11.02.2019 11:28

@vickeycolors, извините за поздний ответ, я так занят в эти дни. Я проверил ссылку (теперь она удалена), это была именно ваша проблема. ваша проблема в том, что div, который содержит каждое из ваших изображений, перекрываются (поскольку они не имеют формы в соответствии с вашими масками), но, к сожалению, я понятия не имею, как решить эту проблему.

— 13.02.2019 13:54

Большое спасибо за ответ, у вас есть какие-нибудь идеи с mask , clip, svg or inkscape?

— 13.02.2019 13:56

Также здесь рабочая ссылка

— 13.02.2019 13:56

Я не думаю, что clip и mask помогут вам, а также я не знаком с inkscape. но я надеюсь, что вы сможете решить свою проблему с помощью svg. Я думаю, что это могло бы помочь вам, но вам нужно будет искать больше.

— 13.02.2019 14:36

09.02.2019 15:46

Ответ принят как подходящий

Вот мое решение. Вы должны отслеживать, какой элемент начал перетаскивание.

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>

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, чтобы исключить наложение двух изображений, и вы решите проблему внутренних углов.

РЕДАКТИРОВАТЬ: Теперь перетаскивание можно инициировать только внутри красных квадратов. Это «безопасные зоны», где элементы не перекрываются. Безопасные зоны должны быть определены для каждой комбинации используемых изображений масок.

я использую маску css, а не clip-path...... также я проверил ваш ответ, если codepen, я пытаюсь перетащить загруженное изображение [правая часть] в маску1, чем его перетаскивание, вместо этого загруженное изображение во 2-й маске перетаскивание..... но что мне нужно, так это "если я перетащу загруженное изображение в маску1, то только это изображение должно перетаскиваться......то же самое и для второго......

— 10.02.2019 15:59

Я добавил css в ваш код html и javascript: codepen.io/kidsdial/pen/GzxwYV, вот результат в видео: drive.google.com/file/d/1Db__i4iMbFqBlT9gshS0mGLp1vz0DGYb/vi‌ew, пожалуйста, проверьте и помогите мне в этом.....

— 11.02.2019 06:28

У меня есть изображения, как эта ссылка, как я могу применить css clip-path для этих изображений?

— 11.02.2019 06:28

Сделаем это по частям. Во-первых, вам нужно было, чтобы после начала перетаскивания одного элемента он не перетаскивал второй элемент. Решение делает это. Еще одна проблема, с которой вы столкнулись, — это перекрытие элементов, как показано на загруженных вами изображениях. Теперь ваша вторая проблема заключается в том, чтобы инициировать перетаскивание только в том случае, если первоначальный щелчок находится внутри формы сердца, будь то сердце 1 или 2.

— 11.02.2019 12:18

ЕСЛИ вам действительно нужно, чтобы вся область сердца была «кликабельной», вы должны определить наложение, созданное элементом SVG, поскольку это единственный способ создать элементы неправильной формы в HTML. Другой альтернативой может быть определение области внутри сердец, указывающей пользователям, где должен начинаться первоначальный щелчок для перетаскивания. Выбор решения зависит от вас.

— 11.02.2019 12:18

извините, у меня действительно нет особого представления об обоих решениях, я буду использовать то, что вы предложите .... но у меня нет возможности изменить изображение маски .... мне нужно использовать только изображение png [изображения предоставлены от клиента], я не могу использовать изображение svg.....

— 11.02.2019 12:23

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

— 11.02.2019 12:25

Я только что отредактировал свой ответ. Теперь перетаскивание можно инициировать только внутри красных квадратов, расположенных там, где элементы не перекрываются.

— 11.02.2019 21:35

К сожалению, это решение отклонено нашим клиентом ..... потому что, как только пользователь перетаскивает за пределы red box в кодовая ручка, пользователь снова не может перетаскивать изображение: drive.google.com/file/d/1dRei8XJhtFeAMWahnrImoX8cuuMQW-VA/vi‌ew

— 12.02.2019 06:28

Как добиться этого с помощью svg? не могли бы вы помочь мне в этом?

— 14.02.2019 08:03

— 14.02.2019 14:00

Для этого нет универсального решения. Тем не менее, может быть способ решить эту проблему. По сути, вам нужны клип-пути для любого изображения, и, основываясь на ваших примерах, я предполагаю, что ваши изображения похожи на heart2.png, черно-белый png, верно? .. так что вам нужно что-то, что может динамически генерировать путь на основе изображения. Вам нужно пройти через границы изображения и сгенерировать координаты для клипа. Нелегкая задача, я могу сказать, может быть, вы можете нанять кого-нибудь, чтобы сделать это? :) Я сомневаюсь, что кто-то здесь сделает это за вас, так как это немного сложно.

— 15.02.2019 13:47

Хорошо, значит, каждый раз, когда мне нужно загрузить изображение сюда: benettfeely.com/clippy или cssplant.com/clip-path-generator, а затем получить путь клипа изображения и добавить этот путь в мой код, это единственный вариант, верно? мне нужно сделать то же самое для всех тысяч изображений?

— 15.02.2019 13:49

Можно ли получить общее решение с помощью масок, svg, inkspace? или это вообще невозможно? или это очень сложно?

— 15.02.2019 13:53

Ну, те два сайта, которые вы упомянули, они не сделают за вас работу, вам придется вручную определять путь клипа. Нет, моя идея состоит в том, чтобы создать программу, которая может делать черно-белое изображение, а затем, используя границы белой формы (сердце, собака или что-то еще), она может АВТОМАТИЧЕСКИ генерировать путь клипа для этого изображения. Это непросто. , я могу заверить вас, что... это тоже не невозможно... и это было бы идеальным решением, поскольку единственное, что вам нужно сделать, это загрузить черно-белое изображение с формой, которую вы хотите получить, и скрипт будет генерировать путь автоматически...

— 15.02.2019 16:09

Потрясающий! Можете ли вы поделиться им с остальным сообществом?

— 21.02.2019 17:19

Извините за задержку, вот решение: codepen.io/AlenToma/pen/WPPyLe, но сейчас я борюсь за масштабирование этих изображений здесь

— 26.04.2019 15:47

как вы хотите управлять зумом? со слайдом прокрутки?

— 28.04.2019 10:25

09.02.2019 15:59