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

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

0 голосов
/ 06 февраля 2019

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

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

Также, если я загружаю изображение только в маске 1 и пытаюсь перетащить, изображение исчезнет, ​​но если я загружу изображения в обеих масках, изображение не исчезнет

ссылка на видео2

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>

Изменить

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

enter image description here

enter image description here

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

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

enter image description here

Ответы [ 5 ]

0 голосов
/ 09 февраля 2019

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

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

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

0 голосов
/ 09 февраля 2019

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

Код 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>

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

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

0 голосов
/ 08 февраля 2019

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

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

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

enter image description here

0 голосов
/ 06 февраля 2019

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

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

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

...