J'ai un projet pour lequel j'utilise mousedown() mouseup().
Il s'agit simplement de déplacer des images d'un endroit à un autre.
Je me sers d'un code qui fonctionne bien.
Alors c'est quoi le problème?
Comme vous pouvez le voir sur le code, pour chaque image je dois répéter le code javascript.
Il y aura au moins 50 images à déplacer. Pas question que je répète ce code 50 fois.
J'ai essayé avec des ' div class' plutôt que des 'div id' en me servant de querySelectorAll mais je n'y arrive pas.
À noter que le drag & drop avec dragstart et dragend etc... ne fait pas mon affaire ici.
Je veux travailler avec mousedown.
Sauriez-vous m'indiquer une façon de m'en sortir?
Code : Tout sélectionner
<img id="image1" onmousedown="onmouseDown()" onmouseup="onmouseUp" src="images/img-1.jpg" alt="" />
<img id="image2" onmousedown="onmouseDown()" onmouseup="onmouseUp" src="images/img-2.jpg" alt="" />
<script type="text/javascript">
image1.onmousedown = function(event){
image1.style.position = 'absolute';
image1.style.zIndex = 1000;
document.body.append(image1);
function moveAt(pageX, pageY) {
image1.style.left = pageX - image1.offsetWidth / 2 + 'px';
image1.style.top = pageY - image1.offsetHeight / 2 + 'px';
}
moveAt(event.pageX, event.pageY);
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
}
document.addEventListener('mousemove', onMouseMove);
image1.onmouseup = function(){
document.removeEventListener('mousemove', onMouseMove);
image1.onmouseup = null;
};
};
image1.ondragstart = function() {
return false;
};
image2.onmousedown = function(event){
image2.style.position = 'absolute';
image2.style.zIndex = 1000;
document.body.append(image2);
function moveAt(pageX, pageY) {
image2.style.left = pageX - image2.offsetWidth / 2 + 'px';
image2.style.top = pageY - image2.offsetHeight / 2 + 'px';
}
moveAt(event.pageX, event.pageY);
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
}
document.addEventListener('mousemove', onMouseMove);
image2.onmouseup = function(){
document.removeEventListener('mousemove', onMouseMove);
image2.onmouseup = null;
};
};
image2.ondragstart = function() {
return false;
};
</script> 