Fatal编程技术网
  • javascript/
  • Javascript 拖动一个图像会使另一个图像被拖动

Javascript 拖动一个图像会使另一个图像被拖动

javascript html css svg

Javascript 拖动一个图像会使另一个图像被拖动,javascript,html,css,svg,css-mask,Javascript,Html,Css,Svg,Css Mask,当我在mask1中拖动上传图像的右侧部分时，mask2中的上传图像正在拖动，但这不应该发生 这是 另外，如果我只上传遮罩1中的图像并尝试拖动，图像将消失，但如果我上传两个遮罩中的图像，图像将不会消失 代码笔： { target_imgb.src=URL.createObjectURL（fileupb.files[0]）； } 设prevX=0，prevY=0，translateX=0，translateY=0，scale=1，zoomFactor=0.1； 启动功能（evt）{ if（evt

当我在mask1中拖动上传图像的右侧部分时，mask2中的上传图像正在拖动，但这不应该发生

这是

另外，如果我只上传遮罩1中的图像并尝试拖动，图像将消失，但如果我上传两个遮罩中的图像，图像将不会消失

代码笔：


{
target_imgb.src=URL.createObjectURL（fileupb.files[0]）；
}
设prevX=0，prevY=0，translateX=0，translateY=0，scale=1，zoomFactor=0.1；
启动功能（evt）{
if（evt.dataTransfer&&evt.dataTransfer.setDragImage）{
evt.dataTransfer.setDragImage（evt.target.nextElementSibling，0,0）；
}
prevX=evt.clientX；
prevY=evt.clientY；
}
函数onDragOver（evt）{
translateX+=evt.clientX-prevX；
translateY+=evt.clientY-prevY；
prevX=evt.clientX；
prevY=evt.clientY；
updateStyle（）；
}
函数updateStyle（）
{ 
让transform=“translate（“+translateX+”px，“+translateY+”px）缩放（“+scale+”）；
if（document.querySelector（'#uploadedImg img'））
document.querySelector（“#uploadedImg img”）.style.transform=transform；
}
onDragOverSec（evt）功能{
translateX+=evt.clientX-prevX；
translateY+=evt.clientY-prevY；
prevX=evt.clientX；
prevY=evt.clientY；
updateStyleSec（）；
}
函数updateStyleSec（）
{ 
让transform=“translate（“+translateX+”px，“+translateY+”px）缩放（“+scale+”）；
if（document.querySelector（'#uploadedImg2 img'））
document.querySelector（“#uploadedImg2 img”）.style.transform=transform；
}
编辑

是因为这两幅图像在水平方向和垂直方向上重叠了吗

编辑2

对于一些人来说，问题仍然不清楚，在下图中，如果用户尝试拖动B部分，同时拖动B部分、C部分和D部分，但这不应该发生

为什么要定义ondragover属性两次？ 在任何情况下，在定义onDragOverSec之后，您稍后将其重写为onDragOverSec， 从而触发用于第一个元素的事件处理程序

<div class="minaimg masked-imgb"   ondragover="onDragOverSec(event)"ondragover="onDragOver(event)" >
作为旁注，可以将这段代码重写得更详细，方法是将两个案例之间的差异作为变量传递给同一个函数，而不是每个函数的两个副本。您可以使用CSS clip path属性根据需要剪切HTML元素的角点。它很容易得到正确的价值通过工具，请谷歌'css剪辑路径生成器'

.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%);
因为元素彼此重叠，我认为最好的修复方法是设置
z-index
。这并不完美，当在元素之间切换时，您必须首先拖动未重叠的元素

fileupa.onchange=e=>{
target_imga.src=URL.createObjectURL（fileupa.files[0]）；
//集z-指数
document.querySelector（“.masked imga”）.style='z-index:'+zIndex++；
}
fileupb.onchange=e=>{
target_imgb.src=URL.createObjectURL（fileupb.files[0]）；
//集z-指数
document.querySelector（“.masked imgb”）.style='z-index:'+zIndex++；
}
设prevX=0，
prevY=0，
translateX=0，
translateY=0，
比例=1，
zoomFactor=0.1；
设zIndex=1；
启动功能（evt）{
//设置父元素的z索引
evt.target.closest（“.minaimg”）.style='z-index:'+zIndex++；
if（evt.target.nextElementSibling&&//fix if.nextElementSibling不是元素
evt.dataTransfer&&evt.dataTransfer.setDragImage）{
evt.dataTransfer.setDragImage（evt.target.nextElementSibling，0,0）；
}
prevX=evt.clientX；
prevY=evt.clientY；
}
函数onDragOver（evt）{
translateX+=evt.clientX-prevX；
translateY+=evt.clientY-prevY；
prevX=evt.clientX；
prevY=evt.clientY；
updateStyle（）；
}
函数updateStyle（）{
让transform=“translate（“+translateX+”px，“+translateY+”px）缩放（“+scale+”）；
if（document.querySelector（'#uploadedImg img'））
document.querySelector（“#uploadedImg img”）.style.transform=transform；
}
onDragOverSec（evt）功能{
translateX+=evt.clientX-prevX；
translateY+=evt.clientY-prevY；
prevX=evt.clientX；
prevY=evt.clientY；
updateStyleSec（）；
}
函数updateStyleSec（）{
让transform=“translate（“+translateX+”px，“+translateY+”px）缩放（“+scale+”）；
if（document.querySelector（'#uploadedImg2 img'））
document.querySelector（“#uploadedImg2 img”）.style.transform=transform；
}
.container{
边框：1px实心#DDDDDD；
宽度：612px；
高度：612px；
位置：相对位置；
背景：红色；
}
.蒙面imga{
-webkit掩码图像：url(https://i.postimg.cc/y8T0y7zY/heart1.png);
掩码图像：url(https://i.postimg.cc/y8T0y7zY/heart1.png);
-webkit掩码位置：中间；
遮罩位置：中心；
-webkit掩码重复：无重复；
面罩重复：不重复；
宽度：259px；
高度：278px；
位置：绝对位置；
顶部：221px；
左：23px；
}
.掩蔽imgb{
-webkit掩码图像：url(https://i.postimg.cc/xdTMsB0G/heart2.png);
掩码图像：url(https://i.postimg.cc/xdTMsB0G/heart2.png);
-webkit掩码位置：中间；
遮罩位置：中心；
-webkit掩码重复：无重复；
面罩重复：不重复；
宽度：416px；
高度：388px；
位置：绝对位置；
顶部：111px；
左：173像素；
}
米纳伊姆加先生{
显示：块；
背景色：白色；
高度：278px；
}
米纳伊姆布先生{
显示：块；
背景色：白色；
高度：388px；
}
我想这就是你想要的：

fileupa.onchange=e=>{
target_imga.src=URL.createObjectURL（fileupa.files[0]）；
}
fileupb.onchange=e=>{
target_imgb.src=URL.createObjectURL（fileupb.files[0]）；
}
设prevX=0，prevY=0，translateX=0，translateY=0，scale=1，zoomFactor=0.1；
让当前_elm=null；
启动功能（evt）{
如果（当前值！=null）r

.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%);



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



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