Je construis une application de glisser-déposer purement en Javascript. J'ai codé la partie glisser où l'élément peut être déplacé et déposé au hasard dans la page. Maintenant, j'ai construit une zone de dépôt qui contient 9 cases (divs) dans lesquelles 9 divs doivent être supprimés. Je ne peux pas penser à une approche qui m'aidera à accomplir cette tâche. Je pense à rendre ces divs 'absolus' et les reconstruire en utilisant les attributs de gauche &. Mais comment devrais-je aller plus loin? Comment le div que je traîne sur moi deviendra-t-il savoir que surmontant il devrait tomber à l'endroit indiqué. Exemple: Si je sélectionne un div numéro 1, il devrait baisser à la cible numéro 1.Comment puis-je calculer et déterminer la zone à laquelle le div doit être abandonné?
Voici le Javascript que je utilise pour sélectionner et en faisant glisser:
window.onload = function() {
var el = document.getElementById('block1');
var mover = false, x, y, posx, posy, first = true;
el.onmousedown = function() {
mover = true;
};
el.onmouseup = function() {
mover = false;
first = true;
};
el.onmousemove = function(e) {
if (mover) {
if (first) {
x = e.offsetX;
y = e.offsetY;
first = false;
}
posx = e.pageX - x;
posy = e.pageY - y;
this.style.left = posx + 'px';
this.style.top = posy + 'px';
}
};
};