[英]Dragging one image makes other image to drag
当我在 mask1 中拖动上传图像的右侧部分时,在拖动 mask2 中上传的图像时,但这不应该发生....
这是视频链接
此外,如果我仅在蒙版 1 中上传图像并尝试拖动,图像将消失,但如果我在两个蒙版中上传图像,则图像不会消失
代码笔: 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 部分也一起拖动,但这不应该发生.....
这是我的解决方案。 您必须跟踪哪个元素开始拖动。
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剪辑路径结合以排除两个图像的重叠,您将解决内角问题。
编辑:现在只能从红色方块内部开始拖动。这些是元素不重叠的“安全区域”。 必须为使用的每个蒙版图像组合定义安全区。
为什么要两次定义 ondrover 属性? 无论如何,在定义 onDragOverSec 之后,您稍后将其重写为 onDragOver,从而触发您用于第一个元素的事件处理程序。
<div class="minaimg masked-imgb" ondragover="onDragOverSec(event)"ondragover="onDragOver(event)" >
作为旁注,通过将两种情况之间的差异作为变量传递给同一个函数,而不是每个函数的两个副本,可以将这段代码重写为更DRY
您可以根据需要使用 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%);
因为元素相互重叠,我认为最好的修复方法是设置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>
演示图片
我认为这就是你要找的:
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.