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
