Comment obtenir des coordonnées onmouseup?

Question

J'ai construit une application javascript pour faire glisser et déposer des divs d'un endroit à un autre dans la même page. J'ai fait la partie qui traîne. J'ai les coordonnées de la div (s) où je dois laisser tomber la div mais je suis coincé à la partie où je devrais introduire des conditions pour faire correspondre les divs à la zone cible. Fondamentalement, les divs peuvent être déposés au-dessus de l'un des divs, mais ils doivent tomber exactement au-dessus de la cible div si sur l'événement onmouseup je suis n'importe où près de ce div cible. Je pense à assigner l'attribut haut et à gauche de mon div (onmousdown) traîné à la div cible mais je peux me tromper .. S'il vous plaît guider mon à travers cette partie. Voici la partie où je besoin d'aide:

function mouseUp(e) 
{ 
    e = e || window.event; 
    var mousePos = mouseCoords(e); 
    var itemPosition = getPosition(id); 
    //console.log("This is at: "+itemPosition); 
    //console.log(mousePos); 
    console.log(getPosition(id)); 
    for(var i=0;i<destination.length;i++) 
    { 
     var curTarget = destination[i]; 
     var targPos = getPosition(curTarget); 
     var targWidth = parseInt(curTarget.offsetWidth); 
     var targHeight = parseInt(curTarget.offsetHeight); 
     var temp = document.elementFromPoint(event.clientX, event.clientY); 

    } 


    id = null; 
} 

Voici le lien vers mon code: jsfiddle La partie javascript doit être écrit à l'intérieur du html pour le faire fonctionner correctement

Answer 1

Le titre de la question est trompeuse, ce que vous semblez vraiment avoir des ennuis, c'est de trouver les coordonnées des divs cibles. Vous saisissez très bien les coordonnées de la souris en utilisant clientX et clientY, bien que vous souhaitiez probablement utiliser les coordonnées pageX et pageY car elles sont relatives à la page affichée et non à la fenêtre d'affichage (c'est-à-dire la fenêtre que l'utilisateur regarde). 0,0 en utilisant les coordonnées du client changera au fur et à mesure que l'utilisateur défilera tandis que les coordonnées de la page référenceront un endroit particulier sur la page Web.

En ce qui concerne la recherche de votre chute, vous divs pouvez utiliser la méthode getClientBoundingRect sur l'élément et utiliser les top, right, bottom et left propriétés sur l'objet retourné pour déterminer si les pageX et pageY coordonnées de la souris sont à l'intérieur (ou près de l'intérieur) l'élément.

Peut-être qu'il y a un meilleur moyen, mais c'est comme ça que je le ferais.

function mouseUp(e){ 
    var targets = document.getElementsByClassName("drop_here"); 
    for(var i=0;i<targets.length;i++){ 
     var bounds = targets[i].getClientBoundingRect(); 
     var lenience = 5; 
     if(e.pageX < bounds.right + lenience && 
     e.pageX > bounds.left - lenience && 
     e.pageY < bounds.top - lenience && 
     e.pageY > bounds.bottom + lenience){ 
     //do my work here 
     } 
    } 
}