[HTML/Javascript] Déplacer des objets au curseur

Fermé
electroking Messages postés 234 Date d'inscription dimanche 14 septembre 2014 Statut Membre Dernière intervention 22 juin 2021 - 11 mai 2016 à 21:26
Salut, j'ai actuellement le code HTML/CSS/JS suivant :
<style>
#cible {
	cursor: move;
	position: absolute;
	top: 5em;
	left: 5em;
	width: 30px;
	height: 30px;
	background: #58f;
}
</style>

<div id="cible"></div>

<script>
var slider = document.getElementById('cible');


function slide( e ) {
	var y = e.clientY;
	var x = e.clientX;
	slider.style.top = y-15 + 'px';
	slider.style.left = x-15 + 'px';
}
 
slider.addEventListener('mousedown', function( e ) {
	e.preventDefault();
	window.addEventListener('mousemove', slide, false);
}, false);
 
window.addEventListener('mouseup', function( e ) {
	this.removeEventListener('mousemove', slide, false);
}, false);
 
</script>


Qui me permet de déplacer un carré bleu (ma div id="cible") avec le curseur, maintenant, admettons que je rajoute une div id="cibleDeux" comment dois-je modifier mon code pour qu'il me permette de déplacer la div sur laquelle j'ai cliqué ? (attention il faut que ce code fonctionne quel que soit le nombre de div cibles).

Merci d'avance pour vos réponses.
A voir également: