PHPfrance

la communauté d'entraide francophone dédiée au PHP

[RESOLU] Glisser déposer

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : [RESOLU] Glisser déposer

Re: [RESOLU] Glisser déposer

par Chabin971 » 12 juin 2014, 15:35

Bonjour,

J'aimerais aussi avoir un coup de main si possible ^^

J'ai un soucis avec le glisser déposer en utilisant le code d'Elie mais on peux dire que le glisser deposer fonctionne a moitié :

Je dois donc faire un glisser déposer de couleurs (voir image)
test1.png
On peux voir que le glisser déposer fonctionne déjà dans le formulaire (en regardant "yeux","cravate" et "col")
Le problème ? Il ne fonctionne que sur ces 3 zones de textes alors que le code est le même pour toutes les zones. (voir image)
test2.png
J'ai vérifié et les id sont corrects je ne vois pas d’où viens le problème :/

Voici mon code :
[javascript]
/* PALETTE DE COULEUR */
champ="";
formulaire="";
//1. Ouvrir la palette
function ouvrir_palette(formulaire_recupere,champ_recupere)
{
formulaire=formulaire_recupere;
champ=champ_recupere;
ma_palette=window.open("palette/palette.html","Palette_de_couleur","height=380,width=400,status=0, scrollbars=0,,menubar=0");
};

//2. Valider la couleur
function valid_couleur(couleur) /* lorsqu'on valide la palette,on récupère la couleur */
{
document.forms[formulaire].elements[champ].value=couleur;
};

/* FIN PALETTE */


/* DRAG & DROP */

$(function() {

$( ".draggable" ).draggable({ revert: "valid" }); //Ceux qui ont pour classe "draggable" peuvent bouger et reviennent a leur place

// Récuperation des couleurs grace a l'id

//0. peau (not works)
$( "#peau" ).droppable({ // peau est droppable
drop: function( event, ui ) {
$('#peau').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//1. yeux (ok)
$( "#yeux" ).droppable({ // yeux est droppable
drop: function( event, ui ) {
$('#yeux').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//2.col (ok)
$( "#col" ).droppable({ // col est droppable
drop: function( event, ui ) {
$('#col').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//3.cravate (ok)
$( "#cravate" ).droppable({ // cravate est droppable
drop: function( event, ui ) {
$('#cravate').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//4.tshirt (not works)
$( "#tshirt" ).droppable({ // tshirt est droppable
drop: function( event, ui ) {
$('#tshirt').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});

});
/* FIN DRAG & DROP */

[/javascript]

Mon formulaire et ma liste en html donnent ca :
<form name='avatar' action='index.php' method='get'>
Peau:<br>
<input type='text' id='peau' name='peau' value='#E06767' placeholder='Couleur de peau' size='10' >
<input type='button' value='Ouvrir la palette' onclick="ouvrir_palette('avatar','peau')">
<br>
<br>
Yeux:<br>
<input type='text' id='yeux' name='yeux' value='DeepSkyBlue' placeholder='Couleur des yeux' size='10' >
<input type='button' value='Ouvrir la palette' onclick="ouvrir_palette('avatar','yeux')">
<br>
<br>
T-shirt:<br>
<input type='text' id='tshirt' name='tshirt' value='#614848' placeholder='Couleur du t-shirt' size='10' >
<input type='button' value='Ouvrir la palette' onclick="ouvrir_palette('avatar','tshirt')">
<br>
<br>
Cravate:<br>
<input type='text' id='cravate' name='cravate' value='Gold' placeholder='Couleur de la cravate' size='10' >
<input type='button' value='Ouvrir la palette' onclick="ouvrir_palette('avatar','cravate')">
<br>
<br>
Col:<br>
<input type='text' id='col' name='col' value='Chocolate' placeholder='Couleur du col' size='10' >
<input type='button' value='Ouvrir la palette' onclick="ouvrir_palette('avatar','col')">
<br>
<br>
<span class='ps'>PS: Vous pouvez aussi deplacer les couleurs les couleurs.<br>
La couleur par default est le blanc.</span><br>
<br>
<input type='submit'  value='Appliquer' />
<br>
<br>
<span class='download'>Pour telecharger l'avatar c'est ici --> <a href='image.svg' download="Votre Avatar">Telecharger</a></span></form>

<ul>
<li class="draggable DeepSkyBlue">DeepSkyBlue
</li>
<li class="draggable Yellowgreen">Yellowgreen
</li>
<li class="draggable Indianred">Indianred
</li>
<li class="draggable Orange">Orange
</li>
<li class="draggable Gold">Gold
</li>
<li class="draggable Peru">Peru
</li>
<li class="draggable Chocolate">Chocolate
</li>
<li class="draggable Darkmagenta">Darkmagenta
</li>
<li class="draggable Hotpink">Hotpink
</li>
</ul>
Help please :)

Re: Glisser déposer

par frakasmala » 12 juin 2014, 09:43

Merci, ça fonctionne niquel ^^
Honnetement la programmation c'est surtout perdre son temps a bien comprendre toutes les fonctions possibiles et trouver celle dont on a besoin ...
Justement, je dois avouer que j'étais un peu à court de temps ^^' mon stage se fini demain et je n'ai jamais pratiqué de javascript avant mais je penses que je vais m'y mettre après car on peux faire de bonnes animations :)

Re: Glisser déposer

par Elie » 12 juin 2014, 09:34

Que penses-tu de ca sinon : http://tympanus.net/Development/SimpleDropDownEffects/

Sinon en regardant les options 10 minutes, je t'ai pondu un truc pas mal ...
Honnetement la programmation c'est surtout perdre son temps a bien comprendre toutes les fonctions possibiles et trouver celle dont on a besoin ...
<!DOCTYPE html>
<html>
<head>
                                <meta charset=utf-8>
                                <title>Test de glisser deposer</title>
                                <script src="//code.jquery.com/jquery-1.10.2.js"></script>
                                <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
               
                                <style>
                                ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
                                li { margin: 5px; padding: 5px; width: 150px; }
                                .Bleu { color:DeepSkyBlue;}
                                .Rouge { color:red;}
                                .Vert { color:green;}
                                .Violet { color:purple;}
                                </style>
                               
                                <script>
                                $(function() {
                                $( ".draggable" ).draggable({ revert: "valid" });
                                $( "#droppable" ).droppable({
                                drop: function( event, ui ) {
                                	$('#droppable').val(ui.draggable.text());
									$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
                                }
                                });
                                });
                                </script>
</head>
<body >
                                <form action="index.php" method="get">
                                <fieldset>
                                <legend>Qui êtes vous ?</legend>
                                prenom :
                                <input type="text" id="prenom" required><br>
                                nom :
                                <input type="text" id="nom" required><br>
                                animal preferé :
                                <input type="text" id="droppable" required>
                                </fieldset>
                                </form>
                               
                                <ul>
                                <li class="draggable Bleu">Chat</li>
                                <li class="draggable Rouge">Chien</li>
                                <li class="draggable Vert">Serpent</li>
                                <li class="draggable Violet">Hamster</li>
                                </ul>

</body>
</html>

Re: Glisser déposer

par moogli » 11 juin 2014, 20:48

Modération :
Afin d'obtenir plus de réponses, le sujet a été déplacé dans un forum plus approprié.

Re: Glisser déposer

par frakasmala » 11 juin 2014, 09:57

Merci pour tout vos liens ^^

Malheureusement je n'y arrive toujours pas :/

J'ai obtenu ce resultat :
glisserdeposer2.png
Mais il y'a deux problemes :

1- Je ne peux faire glisser que le 1er element de la liste (a savoir "Chat")
2- Quand je place "Chat" dans la le formulaire, rien ne se passe alors que mon but est d'obtenir "chat" d'écrit (voir ci dessous)
glisserdeposer3.png
PS : Voici mon fichier index :
<!DOCTYPE html>
<html>
<head>
				<meta charset=utf-8>
				<title>Test de glisser deposer</title>
				<script src="//code.jquery.com/jquery-1.10.2.js"></script>
				<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
				<style>
				ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
				li { margin: 5px; padding: 5px; width: 150px; }
				.Bleu { color:DeepSkyBlue;}
				.Rouge { color:red;}
				.Vert { color:green;}
				.Violet { color:purple;}
				</style>
				
				<script>
				$(function() {
				$( "#draggable" ).draggable();
				$( "#droppable" ).droppable({
				drop: function( event, ui ) {
				$( this )
				.addClass( "ui-state-highlight" )

				}
				});
				});
				</script>
</head>
<body >
				<form action="index.php" method="get">
				<fieldset>
				<legend>Qui êtes vous ?</legend>
				prenom :
				<input type="text" id="prenom" required><br>
				nom :
				<input type="text" id="nom" required><br>
				animal preferé :
				<input type="text" id="droppable" required>
				</fieldset>
				</form>
				
				<ul>
				<li id="draggable" class="Bleu">Chat</li>
				<li id="draggable" class="Rouge">Chien</li>
				<li id="draggable" class="Vert">Serpent</li>
				<li id="draggable" class="Violet">Hamster</li>
				</ul>

</body>
</html>

Re: Glisser déposer

par Elie » 10 juin 2014, 23:57

Classer une liste : http://jqueryui.com/draggable/#sortable
Déposer un objet dans un autre objet : http://jqueryui.com/droppable/

Re: Glisser déposer

par dogmongo » 10 juin 2014, 17:02

http://www.guillaumevoisin.fr/jquery/tu ... des-taches

ça va eu être t'aidé

la demo ici http://tuts.guillaumevoisin.fr/jquery/shoppingList/

Re: Glisser déposer

par frakasmala » 10 juin 2014, 16:02

Oui j'ai regardé mais je t'avouerais que j'ai beaucoup de mal à comprendre comment faire 8-|

Si tu pouvais m'aider ce serait génial ^^

Re: Glisser déposer

par dogmongo » 10 juin 2014, 15:43

Bonjour,

tu as fais une recherche sur drag and drop texte jquery ?

Glisser déposer

par frakasmala » 10 juin 2014, 15:19

Bonjour,

Je suis actuellement en stage de bts iris et je dois faire un glisser deposer de texte mais je bloque completement.
J'ai essayé de chercher sur internet mais sans résultat.

Voici mon contexte : Je dois avoir un formulaire permettant d'identifier une personne avec son prénom, son nom et son animal préféré parmi une liste de choix. (voir image)
glisser deposer.png
le problème est que je ne vois absolument pas comment faire le glisser déposer :/

Voici mon code :
<!DOCTYPE html>
<html>
<head>
		<meta charset=utf-8>
		<title>Qui êtes vous ?</title> 
		<style>
		body {
			padding:32px;
		}

		.animal {
			border:3px solid white;
		}

		</style>
</head> 
<body> 
				<form name='infos' action='test.php' method='get'>
				Votre prenom:
				<input type='text' id='prenom' name='prenom' placeholder='Votre prenom' size='20'> <br>
				Votre nom:
				<input type='text' id='nom' name='nom' placeholder='Votre nom' size='20'> <br>
				Animal prefere:
				<input type='text' id='animal' name='animal' placeholder='Animal' size='20'> <br>
				</form>
				
				<fieldset id="text" class="shop"><legend>Animaux : </legend>
				<div class="animal" draggable="true">Chat</div>
				<div class="animal" draggable="true">Chien</div>
				<div class="animal" draggable="true">Serpent</div>
				<div class="animal" draggable="true">Hamster</div>
				<div class="animal" draggable="true">etc...</div>
				</fieldset>
		
				<a href="index.php"> Index</a>
</body>

</html>
PS: j'ai regardé principalement ici : http://www.scriptol.fr/html5/glisser-deposer-panier.php mais étant donné qu'il s'agit d'images, ça ne fonctionne pas avec le texte

Merci pour ceux qui m'aiderons :)