Glissez et déposez des objets sur un DIV .. relative par rapport à la position absolue et la taille de la cible DIV

Question

J'ai une question sur le glisser-déposer et j'espère que l'un de vous l'a déjà résolu. J'ai une application web en ligne où je peux glisser et déposer des annotations (flèches, étoiles) sur une image qui se trouve sur un DIV.

Voici quelques choses à savoir. 1) L'image peut être de toute taille (parfois grand parfois petit) 2) Le DIV d'emballage peut être aligné à gauche ou centré 3) Le DIV d'emballage peut être fixe ou auto

Ainsi est-il une solution possible faire en sorte que les positions des annotations soient toujours relatives au coin supérieur gauche de l'image? Donc

J'utilise jQuery. Comment aurais-je toujours une position d'annotation par rapport au coin supérieur gauche d'une image une fois que j'aurais laissé tomber l'objet?

Merci!

Answer 1

Essayez quelque chose comme ceci. Il donne des offsets pour l'élément déplaçable et l'élément droppable. Et avec un peu de maths, vous pouvez obtenir la position de l'élément déplaçable par rapport au coin supérieur gauche de la droppable.

$('#droppable').droppable({ 
    drop: function(event, ui) { 
     var thisOffset = $(this).offset() 
     var x = ui.offset.left - thisOffset.left; 
     var y = ui.offset.top - thisOffset.top; 
     alert(x+','+y); 
    } 
});