堆棧內存溢出
  簡體   English   中英

拖動一張圖像使另一張圖像拖動

[英]Dragging one image makes other image to drag

 原文  2019-02-06 07:29:25  4   5    javascript/ html/ css/ svg/ css-mask

問題描述

當我在 mask1 中拖動上傳圖像的右側部分時，在拖動 mask2 中上傳的圖像時，但這不應該發生....

這是視頻鏈接

此外，如果我僅在蒙版 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 部分也一起拖動，但這不應該發生.....

在此處輸入圖片說明

5 個解決方案

解決方案1
 2 已采納  2019-02-09 14:59:50

這是我的解決方案。 您必須跟蹤哪個元素開始拖動。

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剪輯路徑結合以排除兩個圖像的重疊，您將解決內角問題。

編輯：現在只能從紅色方塊內部開始拖動。這些是元素不重疊的“安全區域”。 必須為使用的每個蒙版圖像組合定義安全區。

解決方案2
 0  2019-02-06 08:26:47

為什么要兩次定義 ondrover 屬性？ 無論如何，在定義 onDragOverSec 之后，您稍后將其重寫為 onDragOver，從而觸發您用於第一個元素的事件處理程序。

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

作為旁注，通過將兩種情況之間的差異作為變量傳遞給同一個函數，而不是每個函數的兩個副本，可以將這段代碼重寫為更DRY

解決方案3
 0  2019-02-08 08:32:29

您可以根據需要使用 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%);

解決方案4
 0  2019-02-09 06:21:21

因為元素相互重疊，我認為最好的修復方法是設置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>

演示圖片

在此處輸入圖片說明

解決方案5
 0  2019-02-09 14:46:29

我認為這就是你要找的：

代碼筆

 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>

在這里，我只是在.container div 上定義了ondragover ，它是兩個圖像的容器。 在onDragStart函數內部，我將當前拖動的元素保存到current_elm以便在onDragStart的另一個調用中，直到current_elm變為 null（如果它不為 null，則表示已經有另一個元素正在拖動， onDragStart不會發生任何事情）我們不應該考慮要拖動的新元素。）而且在dragEnd回調函數中，我們應該將current_elm設置為 null 以在需要時啟用新的拖動過程（我希望你明白我的意思；）） current_elm另一個優點是不需要定義兩種類型的updateStyle函數，因為您可以使用current_elm更新相關元素。

讓我知道是否需要更多解釋。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 拖動時拖放更改圖像 拖放事件不起作用-將圖像拖動到另一圖像上？ 在拖動一個jqueryUI可拖動元素時，觸發對其他多個元素的拖動 在 Phaser 3 v3.54.0 中拖放圖像不拖動 如何通過拖動另一個圖像來改變圖像？ 在 Microsoft Windows 上，當使用 HTML5 拖放時，在拖放過程中，我確實看到了拖放圖標（重影） 編輯其他Kinetic.Image時拖動Kinetic.Image Firefox 防止圖片拖拽 在圖像上拖動矩形 Kineticjs Group圖片拖動
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM