问题描述
当我同时上传两个蒙版的图像和拖动下面图像的B部分时，也要拖动C和D部分，但是这不会发生.....因为AB部分位于一个div中，而CD部分位于另一个div中DIV还是我在event stoppropogation做错了event stoppropogation ？
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; if (document.getElementById("check").checked) { event.stopPropagation(); } } 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:silver; } .customa { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; position: relative; top: 350px; z-index: 1; left: -40px; } .customb { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; position: relative; top: 350px; z-index: 1; left: 80px; } .masked-imga { -webkit-mask-image: url(https://i.stack.imgur.com/VNwNC.png); mask-image: url(https://i.stack.imgur.com/VNwNC.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.stack.imgur.com/bdJSg.png); mask-image: url(https://i.stack.imgur.com/bdJSg.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; }
<div class="container"> Stop propagation: <input type="checkbox" id="check"> <label for="fileupa" class="customa"> Upload Image </label> <input id="fileupa" type="file" style="display:none;"> <label for="fileupb" class="customb"> Upload Image </label> <input id="fileupb" type="file" style="display:none;"> <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>
如果您需要有关此问题的任何其他信息，请告诉我。
请帮助我找到解决方案.....
提前致谢....
1楼
首先，您不必使用onDragOver和updateStyle两个处理程序，而是可以使用相同的处理程序并将要拖动的节点存储在变量中。
let prevX = 0,
prevY = 0,
translateX = 0,
translateY = 0,
scale = 1,
zoomFactor = 0.1,
draggedElement = null;
function onDragStart(evt) {
if (evt.dataTransfer && evt.dataTransfer.setDragImage) {
evt.dataTransfer.setDragImage(evt.target.nextElementSibling, 0, 0);
}
prevX = evt.clientX;
prevY = evt.clientY;
draggedElement = evt.target;
}
function onDragEnd() {
draggedElement = null;
}
function onDragOver(evt) {
translateX += evt.clientX - prevX;
translateY += evt.clientY - prevY;
prevX = evt.clientX;
prevY = evt.clientY;
updateStyle();
}
function updateStyle() {
if (!draggedElement) return;
let transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
draggedElement.style.transform = transform;
}
这也应防止同时拖动两者。
如果可以为每个形状创建一个并使用它，那将更好。
请参阅的粗略近似（ 使用 ），但是您可以将SVG文件用作剪切路径，并完全跳过掩膜。