11548 sujets

JavaScript, DOM et API Web HTML5

Drag'n drop

Bonjour,

Je cherche à faire un drag'n drop un peu particulier.
Explication : 

<p id="message17">Message 17</p> 
<div id="boite17" class="bleu"> 
<p id="message18">Message 18</p> 
<div id="boite18" class="rouge"> 
<p id="message19">Message 19</p> 
<div id="boite19" class="vert">


Au lieu d'un drag'n drop "normal", l'élement cliqué est déplacé à l'endroit voulu.
Je cherche à cliquer sur un élement (le div rouge par ex), à faire l'action de le bouger et à le placer sur un autre div (le vert par exemple).
Cette action aurait pour résultat : 


<p id="message17">Message 17</p> 
<div id="boite17" class="bleu"> 
<p id="message18">Message 18</p> 
<div id="boite18" class="rouge"> 
<p id="message19">Message 19</p> 
<div id="boite19" class="[b]rouge[/b]">


dans le but en fait de coller l'élément rouge sur le vert , (tout en gardant la valeur numérique 19)

Si quelqu'un peut me conseiller ?
Modifié par Clairdelune (08 Jun 2007 - 09:51)
Modérateur
Salut,

Si tu ne veux pas trop t'embêter, tu peux récupérer la librairie zDragDrop 1.1.1 et faire un code du même genre :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Exemple Drag'n'Drop</title>
        <script type="text/javascript" src="zdragdroplib.js"></script>
        <script type="text/javascript"><!--
 
(function() {
         
var oO =
{
	'CSS': 'rouge',

	connect: function(oElem, sEvType, fn, bCapture)
	{
		return document.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				false;
	},

	init: function()
	{
		var oDraggable = new zDraggable(
			document.getElementById("div1"),
			zDraggable.DRAG_X | zDraggable.DRAG_Y
		),
		    oDiv = document.getElementById("divDropTarget"),
		    oDropTarget = new zDropTarget(oDiv);

		oDraggable.addDropTarget(oDropTarget);

		oDropTarget.addEventListener(
			'drop',
			function(e)
			{
				e.relatedTarget.moveTo(
					oDropTarget.getLeft(),
					oDropTarget.getTop()
				);
				oDiv.className = oO['CSS'];
                	}
		);
	}
};

oO.connect(window, 'load', oO.init, false);

})();

        //--></script>
        <style type="text/css"><!--

@media screen, projection
{
	#div1
	{
		background-color: blue;
		height: 100px;
		width: 100px;
		position: absolute;
		z-index: 10;
	}    
	#divDropTarget
	{
		height: 200px;
		width: 200px;
		position: absolute;
		left: 300px;
	}
	.vert
	{
		background-color: green;
	}
	.rouge
	{
		background-color: red;
	}
};

        --></style>
    </head>
    <body>
        <p>Déplacer le conteneur bleu sur le conteneur vert.</p>
        <div id="div1"></div>
        <div id="divDropTarget" class="vert"></div>
    </body>
</html>

Modifié par koala64 (08 Jun 2007 - 10:57)
Bonjour Koala et merci !!

Le temps de comprendre le code fournit et de vérifier si cela convient et ce que je recherche, pourrais-tu me dire s'il est possible d'utiliser Jquery ?
Modifié par Clairdelune (08 Jun 2007 - 11:29)
Modérateur
oui mais je ne m'en sers pas tous les jours en même temps donc je ne saurais te dire si tu as besoin de modules supplémentaires ou non. Smiley cligne

Cela dit, tu trouveras des choses intéressantes ici :
http://interface.eyecon.ro/demos
Modifié par koala64 (08 Jun 2007 - 11:38)
Modérateur
mmh... oui. Le plus simple serait de conserver les coordonnées de l'élément dans un cookie que tu mettrais à jour à chaque action.
euh..
je tourne le problème dans tout les sens et je m'embrouille de plus en plus.
Je réexplique (un peu pour moi même ^^)

soit le texte suivant :
Toto 1 (fond bleu)
Toto 2 (fond rouge)
Toto 3 (fond vert)
Toto 4 (fond violet)

but :
passer le toto 4 de la même couleur que le 2 (soit rouge) => action utilisateur
puis passer le toto 3 et 4 de la même couleur que le 1 (soit bleu) => action utilisateur

passer par le drag'n drop pour faire cela.
les textes ne doivent pas bouger , seulement la couleur.

résultat attendu à l'écran :
Toto 1 (fond bleu)
Toto 2 (fond rouge)
Toto 3 (fond bleu)
Toto 4 (fond bleu)

---------------------------

En ce qui concerne Jquery :
En fait, j'avais trouvé le code suivant pour faire du drag and drop avec Interface :
$('#drag1').Draggable({
		grid:		[500,50]
	});

Cela permet de déplacer le id "drag1" de façon saccadé mais :
c'est très (trop simple). Je ne sais pas du coup comment récupérer les coordonnées de l'élement.
Modifié par Clairdelune (08 Jun 2007 - 16:01)
Bonjour,
Si j'ai bien compris ta dernière question, ça peut le faire simplement sans passer par une librairie :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Exemple Drag'n'Drop</title>
        <script type="text/javascript"><!--
 
(function() {
var choixCouleur=0,

addEvent = function (obj,evType,fn,capt){
if(obj.addEventListener){obj.addEventListener(evType,fn,capt);return true;} 
else if(obj.attachEvent)obj.attachEvent("on"+evType,fn) 
} 

addEvent(document, 'mousedown', function(e){
var el= e.target||event.srcElement;
if(!el.tagName)el=el.parentNode;
if(!choixCouleur){
	choixCouleur = el.className ;
	}
else {
	if(confirm("Voulez-vous vraiment changer la couleur de cet élément "+el.tagName+" ?")){
		el.className = choixCouleur ;
		choixCouleur = 0 ;
		}
	}
});

})();

        //--></script>
        <style type="text/css"><!--

@media screen, projection
{
	.bleu
	{
		background-color: blue;
	}
	.vert
	{
		background-color: green;
	}
	.rouge
	{
		background-color: red;
	}
	.violet
	{
		background-color: purple;
	}
};

        --></style>
    </head>
    <body>
        <p>Cliquer pour choisir une couleur et cliquer ensuite sur l'élément à colorier.</p>
        <p class="bleu">Toto 1</p>
        <p class="rouge">Toto 2</p>
        <p class="vert">Toto 3</p>
        <p class="violet">Toto 4</p>
        <p >Toto 5</p>
    </body>
</html>

Koala, je n'ai pas utilisé tout à fait ta syntaxe parce que je ne maitrise pas tout. Mais je pense que le principal est qu'il n'y ai pas de variable globale et que le script n'interfère pas sur d'autres scripts éventuellement présents dans la page Smiley lol
Modifié par chmel (09 Jun 2007 - 17:02)
Bonjour, au cas ou celà puisse servir j'ai fait un tutoriel sur les drag'n drop avec sauvegarde en base de donnée pour le coté "persistant". Il se trouve ici : http://guiralantoine.wordpress.com/2008/02/24/tuto-jquery-drag-n-drop-avec-sauvegarde-automatique-en-base-de-donnees-12/

Bon courage à tous Smiley smile

PS pr modo : j'etais inscrit avec le pseudo guitton ou serial je ne me souviens plus et je ne me souviens plus avec quelle boite mail donc pas possible de recuperer mon mot de passe (cela explique mon faible compteur
de post)
Sujet clos
Aller à