Lorsque je fais glisser la partie droite de l'image téléchargée dans mask1, l'image téléchargée dans mask2 se déplace, mais cela ne devrait pas se produire ....
Voici lien vidéo
Aussi si je télécharge une image uniquement dans un masque 1 et essayez de faire glisser, l'image disparaîtra, mais si je télécharge des images dans les deux masques, l'image ne disparaîtra pas
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>
Modifier 2
Pour certains, la question n'est toujours pas claire, dans les images ci-dessous, si l'utilisateur essaie de faire glisser la partie B , ainsi que la partie B, la partie C et la partie D se déplacent également, mais cela ne devrait pas arriver .....
p>
5 Réponses :
Pourquoi définissez-vous l'attribut ondragover deux fois? Dans tous les cas, après avoir défini onDragOverSec, vous le réécrivez plus tard comme onDragOver, déclenchant ainsi le gestionnaire d'événements que vous utilisez pour le premier élément.
<div class="minaimg masked-imgb" ondragover="onDragOverSec(event)"ondragover="onDragOver(event)" >
En remarque, ce code pourrait être réécrit pour être plus DRY , en passant les différences entre les deux cas sous forme de variables à la même fonction, plutôt que deux copies de chaque fonction
s'il y a plus d'espace entre 2 masques, cela ne se produit pas: codepen.io/kidsdial/pen/ErweyK
Vous pouvez utiliser la propriété CSS clip-path pour couper les coins des éléments HTML comme vous le souhaitez. Il est facile d'obtenir la bonne valeur via l'outil, s'il vous plaît google '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%);
Merci, mais j'ai des milliers d'images de masque ..... Dois-je l'utiliser pour les milliers d'images de masque?
Ensuite, ce sera une solution complètement différente. Par exemple, vous pouvez avoir des couleurs d'arrière-plan un peu différentes pour les images de masque (#ffffff et #fffffe), puis vous pouvez obtenir des informations sur l'événement de clic, sur quel masque a été cliqué et, en fonction de ces informations, déclencher l'événement de glissement nécessaire.
J'ai des images comme celles-ci , comment générer des chemins de clip pour ce type d'images?
Je dois utiliser les mêmes images de masque que celles fournies par le client ..... je n'ai aucune autre option .....
Au lieu d'utiliser différentes couleurs d'arrière-plan dans l'image de masque , puis-je utiliser différentes couleurs d'arrière-plan pour chaque masque via le code css ? ça marchera ? basé sur les couleurs d'arrière-plan, je dois utiliser le glissement ......
est svg va m'aider?
J'ai résolu cela en utilisant clip-path: codepen.io/kidsdial/pen/OdozOG , mais je avoir des milliers d'images de masque, il n'est pas possible de créer un chemin de clip pour toutes ces images de masque, veuillez me donner une solution générique ....
Désolé, je n'ai pas le temps de créer une application pour vous. Essayez de créer un nouveau sujet sur Stack Overflow, car il s'agit d'un problème différent
non, j'ai besoin de conseils de votre part ... au lieu de clip-path, puis-je faire la même chose à travers le masque? est-il possible de trouver une solution générique?
Vous voulez une application, où l'utilisateur peut afficher une image après avoir fusionné deux images sous deux silhouettes différentes, non?
Non, tout ce dont j'ai besoin est de faire glisser l ' image téléchargée dans mask1 sans toucher image téléchargée dans mask2 ......
Je dois avoir 20 réputation pour y écrire. Mon idée est de créer une application avec 3 états: edit-img-a, edit-img-b, non modifiable. Mais voici un mauvais endroit pour illustrer mon idée sans captures d'écran
Parce que les éléments se chevauchent, je pense que la meilleure façon de corriger est de définir le z-index . ce n'est pas parfait, lorsque vous passez d'un élément à l'autre, vous devez d'abord faire glisser l'élément qui ne se chevauche pas.
<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>
.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;
}
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;
}
image de démonstration
Merci pour la réponse, nous offrons une option de glisser aux utilisateurs .... Il n'est donc vraiment pas possible de dire aux utilisateurs de faire glisser la première image ou la deuxième image .... Ils peuvent faire glisser ce qu'ils veulent! ....
Oui, j'ai essayé votre solution ... ils peuvent faire glisser les deux images, mais si l'utilisateur fait glisser la partie droite de la 1ère image, la 2ème image fait glisser ..... mais les deux doivent être indépendantes ...... faites glisser l'image téléchargée dans mask1, que seule la 1ère image doit faire glisser ...... même chose pour la 2ème également ..... Voici votre lien vidéo d'extrait de code: drive.google.com/file/d/1OolS-dJ1Nl4pcOGASQIgoCkU06itgGqP/vi ew
désolé, il n'est vraiment pas possible de dire aux utilisateurs que ne basculez pas entre les éléments , ils peuvent faire ce qu'ils veulent .......
Je ne parle pas comme ça, voir cette image Ce que je voulais dire, c'est pouvoir faire glisser la zone B Je dois d'abord faire glisser la zone A . c'est mieux que je ne peux pas du tout faire glisser la zone B .
J'ai ce que vous avez dit ... Désolé, nous ne pouvons pas dire aux utilisateurs de faire glisser la zone A, qu'après avoir fait glisser la zone B ..... les utilisateurs peuvent simplement télécharger l'image et commencer à faire glisser la zone B .....
j'ai ajouté votre code dans codepen: codepen.io/kidsdial/pen/xMWBXp , il y en a un le problème supplémentaire est que: si nous faisons glisser la partie gauche de la deuxième image, la première image se déplace ...... veuillez vérifier la vidéo ici: drive.google.com/file/d/1-577uOUk-gSJzBE7qYDzce06V9tzCDYf/vi ew
voir cette image nous devons d'abord cliquer sur la zone D . la logique, généralement lorsque l'utilisateur ne parvient pas à faire glisser la zone B ou C , il essaiera de faire glisser A ou D puis en faisant glisser B ou C pour vous pas besoin de leur dire.
Merci pour toutes ces images ABCD ..... Le problème principal est lorsque l'utilisateur fait glisser la partie B , avec la partie B C&D partie se déplace également .... mais lorsque l'utilisateur fait glisser la partie B , elle ne doit déplacer que la partie B .....
votre solution fonctionnera si l'utilisateur fait glisser dans cet ordre: DCAB , mais que l'utilisateur glisse dans cet ordre: BAC votre solution ne fonctionne pas .....
donc en utilisant z-index, nous ne pouvons pas résoudre cela, non? Est-ce qu'il y a un autre moyen ?
d'après ce que je sais, pas d'autre moyen.
Continuons cette discussion dans le chat .
Merci pour votre temps précieux, j'ai essayé d'une manière différente et j'ai obtenu une solution de ce lien
Je ne vois pas de solution différente avec ma réponse sauf le canevas, il utilise toujours z-index et doit faire glisser A ou D pour activer B ou C < / code> mais je suis content si cela fonctionne pour vous.
Je pense que c'est ce que vous recherchez:
<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 {
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;
}
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;
}
Ici, je définis simplement ondragover sur le .container div qui est le conteneur des deux images. et aussi à l'intérieur de la fonction onDragStart , j'enregistre l'élément glissé actuel dans current_elm de sorte que lors d'un autre appel de onDragStart rien ne se passe avant current_elm devient nul (s'il n'est pas nul, cela signifie qu'il y a déjà un autre élément qui traîne donc nous ne devrions pas considérer de nouvel élément à faire glisser.) et aussi dans le dragEnd fonction de rappel, nous devrions définir current_elm sur null pour activer un nouveau processus de glissement si nécessaire (j'espère que vous comprenez ce que je veux dire;).) un autre avantage de current_elm est que il n'est pas nécessaire de définir deux types de fonction updateStyle car vous pouvez mettre à jour l'élément pertinent en utilisant current_elm.
Faites-moi savoir si plus d'explications sont nécessaires.
Merci pour codepen, quand j'essaye de faire glisser l'image téléchargée [partie droite] dans mask1, que ce n'est pas glisser, à la place l'image téléchargée dans le 2ème masque fait glisser ..... mais ce dont j'ai besoin c'est `si je fais glisser l'image téléchargée dans mask1 , que seule cette image devrait faire glisser ...... même chose pour la 2ème aussi ......
Voici le lien vidéo de votre extrait de code drive.google.com/file/d/1wt8jol1RLFnic4904EraqkVu/view" rel="nofollow noreferrer"> drive.google.com/file/d/1wt8jol3RviFnic4904EraqkViql3 Ew Veuillez vérifier et m'aider à ce sujet ....
@vickeycolors, j'ai compris votre point mais malheureusement pour l'instant je n'ai aucune idée pour surmonter ce problème.
Merci pour votre réponse, event.stoppropogation ou z-index m'aidera-t-il?
Vous pouvez également consulter le lien , si j'obtiens une solution pour cela, peut-être que ce problème sera également résolu, non?
Donc, fondamentalement, ce que vous dites, c'est que nous devrions d'abord terminer le glissement dans mask1, que nous devons terminer le glissement mask2 .... mais si nous touchons à nouveau mask1, un problème se produira ...
Je ne pense pas que les approches que vous avez mentionnées pourraient vous aider à résoudre ce problème. Je vais vérifier votre lien et laisser un message à ce sujet.
@vickeycolors, désolé pour la réponse tardive, je suis tellement occupé ces jours-ci. J'ai vérifié le lien (c'est supprimer maintenant) c'était exactement votre problème ici. votre problème est que le div qui contient chacune de vos images se chevauchent (car ils ne sont pas façonnés selon vos masques.) mais malheureusement je n'ai aucune idée de surmonter ce problème.
Merci beaucoup pour la réponse, avez-vous une idée avec masque, clip, svg ou inkscape ?
Voici également lien de travail
Je ne pense pas que clip et mask vous aident et je ne suis pas non plus familier avec inkscape . mais j'espère que vous pourrez résoudre votre problème en utilisant svg . Je pense que cela pourrait vous aider, mais vous devrez chercher davantage.
Voici ma solution. Vous devez garder une trace de quel élément a commencé le glissement.
HTML
.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;
}
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
<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>
De cette façon, le glisser uniquement fonctionnera sur l'image sur laquelle vous avez commencé l'opération de glisser, et il n'impliquera pas l'autre élément lorsque vous survolez la zone.
Combinez cela avec le chemin du clip CSS pour exclure le chevauchement des deux images et vous aurez résolu le problème des coins intérieurs.
EDIT : Désormais, le glissement ne peut être initié que depuis l'intérieur des carrés rouges. zones "où les éléments ne se chevauchent pas. Les zones de sécurité doivent être définies pour chaque combinaison d'images de masques utilisées.
J'utilise un masque css, pas un clip-path ...... aussi j'ai vérifié votre réponse si codepen, j'essaie de faire glisser l'image téléchargée [partie droite] dans mask1, que ce n'est pas glisser, à la place l'image téléchargée dans le 2ème masque est en faisant glisser ..... mais ce dont j'ai besoin, c'est `si je fais glisser l'image téléchargée dans mask1, que seule cette image doit faire glisser ...... même chose pour la 2ème aussi ...
J'ai ajouté css à votre code html et javascript: codepen.io/kidsdial/pen/GzxwYV , voici le résultat en vidéo: drive.google.com/file/d/1Db__i0GshS1pFBlt9g ew s'il vous plaît vérifier et m'aider pour cela .....
J'ai des images comme ce lien , comment je peux appliquer le clip CSS- chemin pour ces images?
Permet de faire cela en plusieurs parties. Tout d'abord, vous aviez besoin qu'après avoir lancé le glissement sur un élément, il ne fasse pas glisser le deuxième élément. La solution fait cela. Maintenant, un autre problème que vous avez est le chevauchement des éléments, comme vous le montrez sur les images que vous avez téléchargées. Maintenant, votre deuxième problème est de ne lancer le glissement que si le clic initial est à l'intérieur des formes de cœur, que ce soit le cœur 1 ou 2.
SI vous avez vraiment besoin de permettre à toute la zone du cœur d'être "cliquable", vous devez définir une superposition créée par un élément SVG, car c'est le seul moyen de créer des éléments de forme irrégulière en HTML. Une autre alternative serait de définir une zone à l'intérieur des cœurs indiquant aux utilisateurs où le clic initial pour faire glisser devrait commencer. C'est à vous de choisir la solution.
désolé, je n'ai vraiment pas beaucoup d'idée sur les deux solutions, j'utiliserai celle que vous suggérez .... mais je n'ai pas la possibilité de changer l'image du masque .... je dois utiliser uniquement l'image png [images fournies par le client], je ne peux pas utiliser l'image svg .....
pouvez-vous s'il vous plaît mettre à jour la réponse avec le code, de sorte que si cela fonctionne pour ce problème actuel, je vais essayer pour les milliers d'images de masque ......
Je viens de modifier ma réponse. Désormais, le glissement ne peut être déclenché que depuis l'intérieur des carrés rouges, qui sont positionnés là où les éléments ne se chevauchent pas.
Je suis désolé de dire que cette solution est rejetée par notre client ..... car une fois que l'utilisateur glisse en dehors de la boîte rouge dans codepen , là encore, l'utilisateur ne peut pas faire glisser l'image: drive.google.com/file/d/1dRei8XJhtFeAMWahnrImoX8cuuMQW-VA/vi ew
Comment y parvenir avec svg? pouvez-vous s'il vous plaît me guider à ce sujet?
J'ai résolu cela en utilisant clip-path: codepen.io/kidsdial/pen/OdozOG , mais je avoir des milliers d'images de masque, il n'est pas possible de créer un chemin de clip pour toutes ces images de masque, veuillez me donner une solution générique ....
Il n'y a pas de solution générique pour cela. Cependant, il peut y avoir un moyen de le résoudre. Fondamentalement, vous avez besoin des chemins de clip pour n'importe quelle image, et sur la base de vos exemples, je suppose que vos images sont comme le heart2.png, un png noir et blanc, correct? .. donc, ce dont vous avez besoin est quelque chose qui peut générer dynamiquement le chemin basé sur l'image. Vous devez parcourir les bordures de l'image et générer les coordonnées du chemin du clip. Pas une tâche facile, je peux dire, peut-être que vous pouvez engager quelqu'un pour le faire? :) Je doute que quelqu'un ici le fasse pour vous, car c'est un peu complexe.
d'accord Signifie que chaque fois que j'ai besoin de télécharger l'image ici: bennettfeely.com/clippy ou cssplant.com/clip-path-generator & que récupérez le chemin du clip de l'image et ajoutez ce chemin dans mon code, c'est la seule option, non? dois-je faire la même chose pour les mille images?
est-il possible d'obtenir une solution générique via des masques, svg, inkspace? ou ce n'est pas possible du tout? ou c'est très complexe?
Eh bien, ces deux sites que vous avez mentionnés, ils ne feront pas le travail pour vous, vous devrez définir le chemin du clip à la main. Non, mon idée est de créer un programme qui peut prendre une image blanche et noire, puis en utilisant les bordures de la forme blanche (cœur, chien ou autre), il peut générer AUTOMATIQUEMENT le chemin du clip pour cette image ... Ce n'est pas facile , Je peux vous assurer que ... pas impossible non plus ... et ce serait la solution parfaite puisque la seule chose que vous auriez à faire est de télécharger une image en noir et blanc avec la forme que vous souhaitez obtenir et le script le ferait générer le chemin automatiquement ...
Impressionnant! Pouvez-vous le partager avec le reste de la communauté?
Désolé pour le retard, voici la solution: codepen.io/AlenToma/pen/WPPyLe , mais maintenant J'ai du mal à agrandir ces images ici
comment voulez-vous contrôler le zoom? avec une diapositive de défilement?
Deux éléments (masked-imga et masked-imgb) se chevauchent dans une zone spécifique, ce qui déclenche un événement de glissement pour les deux.
Vous avez raison, mais comment résoudre ce problème? y a-t-il un hack de code pour cela? d'une manière moche?
@vickeycolors regarde
event.stopPropagation ()@MartinBarker a suivi
event stoppropogationcomme ici: codepen.io/kidsdial/pen/OdwWQo et ne fonctionne toujours pas ..... pouvez-vous vérifier une fois ...