拖动一幅图像会使另一幅图像拖动

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> 修改是因为这两个图像在水平方向上重叠了吗?垂直吗?Is it because those two images overlapped horizontally & in vertically? 编辑2对于某些问题，仍然不清楚，在下面的图像中，如果用户尝试将B部分与B部分一起拖动，则C部分与D部分也会拖动，但这不应该发生.....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.....推荐答案这是我的解决方案.您必须跟踪哪个元素开始了拖动.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> JSvar 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.将其与CSS剪辑路径结合使用以排除两个图像的重叠，您将解决内角的问题.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. 这篇关于拖动一幅图像会使另一幅图像拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！