Page 1 sur 1

FF4 RC2 - DIV Redirection indésirable lors d'un Drag n Drop

Publié : 22 mars 2011, 10:55
par le_futile
Bonjour,
Je viens sur ce forum car j'ai un souci depuis 2 jours.
J'ai fait une interface de DnD, basée sur le HTML5.

Sauf... que lors du Drop, je suis systématiquement redirigé vers une page dont l'adresse Web est l'ID du Noeud déplacé.

Exemple:

Code : Tout sélectionner

<DIV id="[b]toto[/b]" draggable="true" > blabla </DIV>
Lors du drop, je vais être redirigé vers la page:

Code : Tout sélectionner

http://[b]toto[/b]
FF4 se chargeant de compléter pour en trouver absolument une.

Donc, un exemple du code employé :

Code : Tout sélectionner

/* ---------------------------------------------------------------------------------------------------
 * Fonction dédiées à l'inteface graphique Drag 'n Drop
 * ---------------------------------------------------------------------------------------------------
 */

function monDragstart(e)
{
	e.dataTransfer.effectAllowed = 'move'; 
	e.dataTransfer.setData('Text', e.target.id);
	e.stopPropagation();
}
    
function monOver(e)
{
	if (e.preventDefault) e.preventDefault(); 
	e.dataTransfer.dropEffect = 'move';
	e.stopPropagation();
}

function monDrop(e) {
    
	e.stopPropagation(); 
	var obj = document.getElementById(e.dataTransfer.getData('Text'));

	var Papa = obj.parentNode;
	var Maman = e.target.parentNode;

	if ( (obj != e.target) && (Papa != Maman) ) {
			e.target.appendChild(obj);
	}
}


function init()
{
	var liste = document.querySelectorAll("*.objet");
	for (var i = 0; i < liste.length; i++) {
		el = liste[i];
		el.setAttribute('draggable', 'true');
		el.addEventListener('dragstart', monDragstart, false);

	}

	var liste = document.querySelectorAll("#reception");
	for (var i = 0; i < liste.length; i++) {
		el = liste[i];
		el.setAttribute('draggable', 'false');
		el.setAttribute('dropzone', 'true');
		el.addEventListener('dragover', monOver, false);
		el.addEventListener('drop', monDrop, false);
	}
}
J'ai peut-être mal cherché, mais je n'ai pas trouvé d'info spécifique à ce problème.
En plus des e.stopPropagation j'ai bien tenté de mettre des "return false",
mais sans plus de succé...

Merci pour votre aide.

------------------------------------------------------------------------------------------
[EDIT]

J'ai finalement dû me résoudre à placer les balise en dur dans le code HTML :

Code : Tout sélectionner

<div onDrop="monDrop(event); return false"> .... </div>
Ca ne m'arrange pas du tout, mais cela fonctionne.

Néanmoins, si quelqu'un a une idée pour le souci avec le code Javascript, je suis preneur.

------------------------------------------------------------------------------------------
[EDIT]
Dernière édition de ce post.

Lorsqu'il y a une erreur dans la code javascript, pas dans la syntaxe, mais dans le fonctionnement,
par exemple, lorsque l'on désire récupérer un attribut sur un objet, mais que cet objet de contient pas cet attribut,
le code s'interrompt, et laisse la main à FF4.
FF4 interprète alors l'ID de l'objet (event.source.id ou event.target.id) comme une balise HREF .

Est-ce un bug, ou une fonctionnalité ???