Drag & Drop

06 oct. 2006, 17:05

Bonjour,

Je gère un site de photo avec une interface administrative.

Je voudrai sur une page ou sont mes photos faire un drag & drop de mes photos afin de modifier l'orde en sachant que j'ai créé dans ma base un ordre de tri.

Est ce possible

Merci d'avance

10 oct. 2006, 11:49

faudra écrire ça en javascript :
MouseDown sur une photo = mémorise le chemin de la photo origine
+MouseUp sur une autre photo = permuter les chemins de la cible et de l'origine

Je te laisse cogiter

10 oct. 2006, 12:32

Le principe est donc de permuter les url de l'image de départ et d'arrivée.

onMouseDown : mémorise l'objet image de départ quand on presse le bouton de la souris sur l'objet premier

et onMouseOver : effectue la permutation des url de départ et d'arrivée dès que la souris est glissée sur l'objet cible

Code : Tout sélectionner

<script>
//1 variable pour mémoriser la source à déplacer : une référence sur le conteneur de la source à déplacer
var ImageToMove_Container = null;

//fonction qui mémorise le conteneur source 
function setFirstImage(image){
	ImageToMove_Container = image;
}

//fonction qui réalise le déplacement : permute l'url de la cible dans l'url du conteneur source et vis-versa
function setLastImage(image){
	if (ImageToMove_Container != null){
		//permutation des url de la source et la cible
		var ImageToMove_src = ImageToMove_Container.src;
		ImageToMove_Container.src = image.src;
		image.src = ImageToMove_src;
		//nettoyage de la mémoire
		ImageToMove_Container = null;
	}
} 
</script>
<p></p>
<img id="image1" src="image1.gif" onMouseDown="setFirstImage(this);" onMouseOver="setLastImage(this);" />
<p></p>
<img id="image2" src="image2.gif" onMouseDown="setFirstImage(this);"  onMouseOver="setLastImage(this);" />[/php]

Mais on peut généraliser pour tout conteneur HTML, en permutant le contenu HTML de 2 objets :
[php]<script>
//Source à déplacer 
var objectToMove = null;

//fonction qui mémorise le conteneur source 
function setFirstObject(object){
	objectToMove = object;
}

//fonction qui réalise le déplacement
function moveTo(object){
	if (objectToMove != null){
		//permutation 
		var objectToMove_HtmlCopy = objectToMove.innerHTML;
		objectToMove.innerHTML = object.innerHTML;
		object.innerHTML = objectToMove_HtmlCopy;
		//nettoyage de la mémoire
		objectToMove = null;
	}
} 
</script>
<p></p>
<div onMouseDown="setFirstObject(this);" onMouseOver="moveTo(this);"><img src="image1.gif" /></div>
<div onMouseDown="setFirstObject(this);" onMouseOver="moveTo(this);"><img src="image2.gif" /></div>

11 oct. 2006, 16:30

Selon le même principe mais cette fois les objets se déplacent par un effet drag&drop :

Exemple 1: Permutation des contenus des objets HTML par effet drag&drop
En pointant un objet de départ, son contenu est arraché par le pointeur, en le déplaçant sur un autre objet l'échange des contenus se fait entre le pointeur et l'objet pointé.

Dans cet exemple, les objets manipulés sont des images mais ça pourrait être des iframes ou autres...

Code : Tout sélectionner

<!-- Le script pour le déplacement du porteur d'objets-->
<script>
//fonction qui réalise le déplacement
function moveIt(where){ //where désigne tout objet couvert par le pointeur l'ors du déplacement
		//cacher le porteur s'il est vide
		if (document.getElementById("porteur").src == "http://localhost/objetsHtml/drag&drop/") 
			document.getElementById("porteur").style.visibility = "hidden";
		else document.getElementById("porteur").style.visibility = "visible";
		
		//déplacer le porteur avec le pointeur de la souris
		document.getElementById("porteur").style.left = window.event.x ;
		document.getElementById("porteur").style.top = window.event.y ;
		
		//Mette en avant-plan l'objet déplacé sur celui couvert
		document.getElementById("porteur").style.zIndex = 1;
		if (where) where.style.zIndex = -1;
} 
//Events pour la surface du document
document.onmousemove = moveIt; //mouvement pointeur
</script>

<!-- Les styles -->
<style>
.porteur {position:absolute; visibility:hidden; border-style:none; border-width:0; width:50; height:50}
</style>

<!-- Le porteur d'objet (vide par défaut) -->
<img id="porteur" src="http://localhost/objetsHtml/drag&drop/" class="porteur" style="left:100; top:100" onMouseMove="moveIt(this);" >
</img>

<!-- La cadre source d'objets -->
<div id="cadre" class="cadre" style="left:0; top:0">
	<table>
	<tr><td><img  src="image1.gif" style="width:50; height:50" onMouseOver="cut_paste(this)" ></img></td></tr>
	<tr><td><img  src="image2.gif" style="width:50; height:50" onMouseOver="cut_paste(this)" ></img></td></tr>
	<tr><td><img  src="image1.gif" style="width:50; height:50" onMouseOver="cut_paste(this)" ></img></td></tr>
	<tr><td><img  src="image2.gif" style="width:50; height:50" onMouseOver="cut_paste(this)" ></img></td></tr>
	<tr><td><img  src="image1.gif" style="width:50; height:50" onMouseOver="cut_paste(this)" ></img></td></tr>
	<tr><td><img  src="image2.gif" style="width:50; height:50" onMouseOver="cut_paste(this)" ></img></td></tr>
	</table>
</div>

<!-- Le script -->
<script>
//pour l'interaction cadre sources/porteur
function cut_paste(object){
		//passer les objets du cadre au porteur et vis-versa celon les cas (Echange d'objet)
		//Cas 1. du cadre source vers le porteur (le porteur est vide)
		if (object.src && !document.getElementById("porteur").src){ 
			document.getElementById("porteur").src = object.src;
			object.src = "";
		}
		//Cas 2. Echange du contenu entre cadre source et porteur (les deux ne sont pas vides)
		else if (object.src && document.getElementById("porteur").src){
			var tmp_src = object.src;
			object.src = document.getElementById("porteur").src;
			document.getElementById("porteur").src = tmp_src;
		} 
		//Cas 3. du porteur au cadre source (le cadre est vide)
		else if (!object.src && document.getElementById("porteur").src){
			object.src = document.getElementById("porteur").src;
			document.getElementById("porteur").src = "";
		}
}
</script>

Exemple 2: Des fenêtres déplaçables.
Chaque fenêtre contient une barre de titre et un contenu sous forme de navigateur iframe.

Code : Tout sélectionner

<!-- Le script -->
<script>
//Source à déplacer 
var objectToMove=null, dx=0, dy=0;

//fonction qui mémorise le conteneur source 
function setObjectToMove(object){
	objectToMove = object;
	if (objectToMove && objectToMove.style && objectToMove.style.left && objectToMove.style.top){
		//calculer l'écart pointeur et bords left/top pour stabiliser l'objet par rapport au pointeur l'ors du déplacement
		dx = window.event.x - parseInt(object.style.left);
		dy = window.event.y - parseInt(object.style.top);
		//Events pour la surface du document
		document.onmousemove = moveIt;
		document.onmouseup = stopMovingIt;
	}

}

//fonction qui réalise le déplacement
function moveIt(where){ //where désigne tout objet couvert par le pointeur l'ors du déplacement
	if (objectToMove != null){
		//fixer la position de l'objet à déplacer (en utilisant l'écart de stabilité)
		objectToMove.style.left = window.event.x - dx;
		objectToMove.style.top = window.event.y - dy;
		//Mette en avant-plan l'objet déplacé sur celui couvert
		objectToMove.style.zIndex = 1;
		if (where) where.style.zIndex = -1;
	}
} 
function stopMovingIt(){
		//nettoyage de la mémoire
		objectToMove=null; dx=0; dy=0;
		//et les Events
		document.onmousemove=null;
		document.onmouseup=null;
}
</script>

<!-- Les styles -->
<style>
.fenetre {position:absolute; border-style:solid; border-width:1; background-image:url(fenetre.gif); color:silver; width:444; height:355}
.titre   {style-decoration:transprent; color:yellow; width:444; height:20; cursor:pointer; padding-left:30; padding-top:2; font-size:12; font-weight:bold}
.contenu {width:100%; height:100%}
</style>

<!-- Les fenêtres -->
<div id="fenetre1" class="fenetre" style="left:100; top:100" onMouseDown="setObjectToMove(this);" onMouseMove="moveIt(this);" onMouseUp="stopMovingIt();">
	<div id="fenetre1_titre" class="titre" onMouseDown="setObjectToMove(this);" onMouseMove="moveIt(this);" onMouseUp="stopMovingIt();">
	Fenêtre 1
	</div>
	<iframe id="fenetre1_contenu" src="http://localhost:80/" class="contenu"></iframe>
</div>

<div id="fenetre2" class="fenetre" style="left:200; top:200" onMouseDown="setObjectToMove(this);" onMouseMove="moveIt(this);" onMouseUp="stopMovingIt();">
	<div id="fenetre2_titre" class="titre" onMouseDown="setObjectToMove(this);" onMouseMove="moveIt(this);" onMouseUp="stopMovingIt();">
	Fenêtre 2
	</div>
	<iframe id="fenetre2_contenu" src="http://localhost/" class="contenu"></iframe>
</div>

12 oct. 2006, 11:30

Merci beaucoup, je vais essayer

28 oct. 2006, 17:07

tout cela est très bien..j'ai essayé...ca marche très bien..
du reste, il existe de nombreuses sources sur le web permettant de réaliser des drag and drop

mais cela ne résoud pas le problème posé au départ consistant à mémoriser dans une base de données le nouveau tri effectué par le drag and drop...

avez-vous une solution?

28 oct. 2006, 18:06

avez-vous une solution?

AJAX...

03 nov. 2006, 15:15

on ne peut enregistrer un tri dans une base, c'est contraire à la logique des bases de données relationnelles qui ne stockent dans les tables que les données brutes mais l'on peut concidérer que ce que tu veux faire est de mémoriser un profil d'organisation du dernier affichage d'un utilisateur et ça tu peux le faire en mémorisant l'ordre des objets affichés dans un profil utilisateur qui pourra être chargé à la prochaine session.

03 nov. 2006, 23:05

non ! je veux effectivement enregistrer le tri dans ma base en modifiant le champ ID dune table en fonction de l'ordre d'affichage..

je suis parvenu à une solution après pas mal de vicissitudes :
http://www.phpfrance.com/forums/voir_su ... -asc-0.php

03 nov. 2006, 23:17

Par définition un 'id' est un identifiant unique et est attribué une et une seule fois. J'espère que tu ne gères pas les dépendances, si c'est le cas je serais currieux de voir comment tu fais (sans recéer toute ta base de données à chaque fois).

Avec ce raisonnement tu 'donnes un grand coup de pied' à toute la philosofie des bases de données relationnelles.

04 nov. 2006, 02:03

et bien il suffit de regarder mon post via le lien que j'ai indiqué..

il contient le détail de mon projet

en plus, j'ai résussi (via Ajax) à traiter le drag and drop vers ma base de données sans passer par un formulaire.. c'est a dire que lorsque j'effectue le drag and drop, la base est mise à jour via une commande onmouseup.

je ne sais pas ce que tu veux dire par id unique et dépendances...je ne suis pas un spécialiste des bases mysql.

quand je parle de id dans ma table, je veux dire que je gère un champs ID (varchar) qui contient des nombres ordonnés par unités de 0 à 9.
J'extraie les lignes par le champs ID (id asc). Mon drag and drop est destiné à actualisé ce champ ID en fonction du noveau tri produit par le drag and drop. De cette façon, je modifie l'ordre d'affichage des lignes.

voilà ! j'espère que c'est clair (pour un non néophyte comme moi)

peut-être que mon projet est intéressant (à voir)

06 nov. 2006, 11:53

non ! je veux effectivement enregistrer le tri dans ma base en modifiant le champ ID dune table en fonction de l'ordre d'affichage..

je suis parvenu à une solution après pas mal de vicissitudes :
http://www.phpfrance.com/forums/voir_su ... -asc-0.php

vicissitudes c'est le mot exact dans ce genre de situation. En fait, cette difficulté pourra être levée si on respecte le concept de base de données relationnelles et on sait que le modèle relationnel est ouvert à ce genre d'astuces.
Je m'explique: En principe la table de base qui contient les données sources doit avoir des relations avec d'autres tables et donc utilise une clé primaire (ID unique) pour ça.
Rien que pour cette raison relationnelle la clé primaire ne doit pas jouer un autre rôle qui nuit à sa fonction relationnelle primaire. Exemple, un rôle qui provoque le changement des valeurs de la clé sans mettre à jour ses relations.
Le fait qu'un champ soit "clé primaire" impose par défaut un tri.
Alors que dans ton cas, tu utilises la clé primaire dans un rôle de tri seulement sans prendre en compte son rôle relationnel.

La solution qui consiste à réaliser ce que tu veux aisément tout en respectant le principe, est de considérer le tri comme un traitement d'organisation dynamique des données sources (filtre ou masque de présentation de données) quitte à stocker les paramètres d’organisation dans une table dans la base de données lorsque le tri est personnalisé et non automatique. Une table qui sera mise en relation avec la table de base. Et qui pourra se mettre à jour dans le temps sans influer sur l’ordre des données de base. Ce principe s’inscrit dans le concept d’index. Car un Index sert à réorganiser dynamiquement des données sources en vue de réaliser une présentation ou faciliter la recherche de données.

Donc ce qu’il te faut est de créer une table « Index » qui recevra les valeurs de la clé primaire dans l’ordre personnalisé déterminé par tes drag&drop.
La présentation ou l’accès aux données se fera donc via cette table puisque les valeurs qui y sont stockées correspondent chacune à une valeur unique de clé primaire dans la table de base (c’est ce qu’on appelle une clé étrangère ou relation)

Exemple :
Table de base : t1 (id (clé primaire), prénom)
Enregistrements dans t1 :

Id, prénom
1, ‘Marc’
2, ‘Julien’
3, ‘Sébastien’
4, ‘Aline’
5, ‘Pauline’

Table Index : index_t1 (ordre (auto incrémenté)(champ facultatif), id (clé étrangère issue de la table t1 = relation)
Enregistrements dans index_t1 (classement personnalisé et non un tri automatique):

ordre, id
1, 2
2, 5
3, 4
4, 1
5, 3

Ce qui signifie que l’ordre personnalisé des données de base est le suivant :

ordre, id, prénom
1, 2, ‘Julien’
2, 5, ‘Pauline’
3, 4, ‘Aline’
4, 1, ‘Marc’
5, 3, ‘Sébastien’

On voit bien que grâce à la clé étrangère (id) on peut retrouver facilement les données de base (ici : le prénom)
La mise à jour de cet ordre est simple comme sa première création, il suffit donc de supprimer un ordre précédent pour le remplacer par un nouvel ordre. Et pour ça deux requêtes SQL suffisent :

1. A la création d’un ordre : la requête INSERT (des nouveaux id) dans la table Index
2. Au changement de l’ordre : les requêtes : DELETE (de tous les id anciens) et INSERT (des nouveaux id) dans la table Index

Mais dans l'absolu, le chagement de l'ordre pourra être considéré comme un nouvel ordre, il est donc plus simple de lancer les deux requêtes DELETE/INSERT tout cas confondu: création ou mise à jour.
Et donc le traitement drag&drop fera un DELETE/INSERT dans la table Index.
Ce qui réalise l'objectif sans toucher aux données de bases.

06 nov. 2006, 22:51

pas mal !

je vais essayer ..

et je reviens plus tard si besoin est ..

cordialement

02 févr. 2007, 16:10

pour en revenir à ce problème....effectivement la question est de savoir comment on gère les dépendances (sous-rubriques attachées à la rubrique drag and droppée)

j'ai essayé ta formule => création d'une table de tri avec comme paramètre la clé de la table de base

je ne suis pas parvenu à gérer correctement les dépendances.

je fais une boucle while pour récupérer toutes les valeurs dépendantes de la valeur envoyée par le drag end drop mais cela me génère des anomalies, en particulier, j'insère des doublons de dépendance qui ont des valeurs différentes
par ex : si je dois modifier 120 en 110, j'obtiens dans la table de tri 110 et 120

y a t-il un moyen commode de gérer les dépendances ?

Drag & Drop

Qui est en ligne