Bonjour,

Je rencontre un problème genant lors d'un drag and drop.

J'ai placé mes deux événements mousedown et mouseup sur une image.
(Cette dernière est destinée à faire comprendre à l'utilisateur qu'il est possible de bouger le parent de cette élément. Qui plus est, elle doit permettre, lorsque le bouton de la souri est enfoncé, de déplacer l’élément parent à l'image).

Le problème est que lorsque je commence a "draguer" le parent (avec le contenu de ses enfant), il ne marche que pour quelque pixel, ensuite l’icône de la souri change et devient le rond barré d'interdiction (interdiction de déplacer l’élément) et l'élement ne veut plus bouger.
Si je relâche le bouton de la souri, l’élément reviens sur le pointeur de la souri. A ce moment là si je bouge la souri, sans avoir le bouton de la souri enfoncé, l’élément suivra le pointeur...

J'ai compris en regardant d'avantage ma structure que mon code ne me laisse la possibilité de "drager" l’élément parent que pour le minuscule espace qui sépare l'image de l'élément parent (C'est super clair non? )

Bref, j'arrive pas à trouver la solution...

Mon code js est le suivant :

var init = [];

		for(i=0; i<P_menu_gauche.length; i++){
			if(P_menu_gauche[i].className == 'nom_playlist' || P_menu_gauche[i].className == 'nom_album'){
				P_menu_gauche[i].getElementsByTagName('img')[0].addEventListener('mousedown', function(e){
					i = init;
					i['target'] = e.target || event.srcElement;
					i['Ox'] = e.clientX - i['target'].parentNode.offsetLeft;
					i['Oy'] = e.clientY - i['target'].parentNode.offsetTop;
					i['target'].parentNode.setAttribute('style', 'position:absolute');
				}, false)
				
				P_menu_gauche[i].getElementsByTagName('img')[0].addEventListener('mouseup', function(e){
					i['target'].parentNode.removeAttribute('style');
					init = [];
				}, false)
			}
		}
		
		document.addEventListener('mousemove', function(e){
	if(init['target']){
		init['target'].parentNode.style.left = e.clientX - init['Ox'] + 'px';
		init['target'].parentNode.style.top = e.clientY - init['Oy'] + 'px';
	};
},false)

Merci d'avance,
Fab.

Bonjour,
As tu regardé du coté de jQuery (framework javascript) car il y a des fonctions très simple permettant de faire du drag and drop.

Voici un lien vers une démo : http://jqueryui.com/demos/draggable/

Bon courage!

Ok, merci. Je connais pas encore le Jquery, mais sa viendra.
Merci pour ton aide et ta sympathie.

Je cherche toujours la solution en Javascript.

Bonjour,

Je tiens à préciser que jQuery est une bibliothèque JavaScript, par conséquence répond à ton besoin.

J'en prend note.
Merci

Bonjour,
Je n'ai rien trouvé de très approfondi sur le SDZ concernant le Drag & Drop. Auriez-vous une piste ?

PS : Pardon de perturber cette discussion, mais je ne pense pas que mon intervention vaille le coût d'un topic.

Salut !

Tu cherches des précisions sur le Drag'n'Drop JQuery ou pour le faire toi-même à la main ?

Il y a ceci sur le sdz : ICI

Cordialement,
Fab

Merci à vous deux pour votre attention. Je pense explorer plus avant le lien de Fabou291 !
Cordialement