bonjour,

je voudrai savoir comment peut on récupéré les valeurs avec un dragndrop, car la moi pas comprendre....

  <?php
$reponses = array(
	'chx' => array(
		'reponse' => 'co',
		'mot' => 'un',
		'image' => 'img/colis.gif',
		'phrase' => 'lis'
	) ,
	'chx_1' => array(
		'reponse' => 'ca',
		'mot' => 'un',
		'image' => 'img/cafe.gif',
		'phrase' => 'fe'
	) ,
	'chx_2' => array(
		'reponse' => 'ki',
		'mot' => 'un',
		'image' => 'img/kiwi.gif',
		'phrase' => 'wi'
	) ,
	'chx_3' => array(
		'reponse' => 'qui',
		'mot' => 'une é',
		'image' => 'img/equipe.gif',
		'phrase' => 'pe'
	) ,
	'chx_4' => array(
		'reponse' => 'cu',
		'mot' => 'une',
		'image' => 'img/cuisine.gif',
		'phrase' => 'isine'
	) ,
	'chx_5' => array(
		'reponse' => 'que',
		'mot' => 'un cas',
		'image' => 'img/casque.gif',
		'phrase' => ''
	) ,
	'chx_6' => array(
		'reponse' => 'quette',
		'mot' => 'de la mo',
		'image' => 'img/moquette.gif',
		'phrase' => ''
	)
);
$choix = array(
	'co' => 'co',
	'ca' => 'ca',
	'ki' => 'ki',
	'qui' => 'qui',
	'cu' => 'cu',
	'que' => 'que',
	'quette' => 'quette'
);
echo '<div style="display:inline;">';

foreach($choix as $key => $value)
	{
	echo '<form class="form_exercices_ou_result" action="correction_c_k_p.php" method="POST" />';
	echo '<input type="text" name="'.$key.'" value="'.$value.'" class="dropndrag" id="text_" draggable="true" ondragstart="drag(event)" />';

    }
        echo '</div>';
foreach($reponses as $cle => $reponse)
	{
	echo '<article class="content_img">';
	echo '<figure style="height:80px;margin-top:.1em;display:block;">';
	echo '<img  style="margin:0 0 0 -.5em;" src="' . $reponse['image'] . '" alt="' . $reponse['mot'] . '' . $reponse['phrase'] . '" width:"74" height="74" />';
	echo '</figure>';
	echo '<p>' . $reponse['mot'] . '</p><div style="display:inline-block;width:3em;height:20px;" id="text_" ondrop="drop(event)" ondragover="allowDrop(event)"><input type="hidden" name="'.$cle.'" value="" /></div><p style="margin:0;"> ' . $reponse['phrase'] . '</p>';
	echo '</article>';
	}

echo '<p class="correction_center"><input type="submit" name="correction" value="correction"/></p>';
echo '</form>';
?>

merci pour vos réponses
Salut,

Qu'utilises-tu comme librairie pour opérer le drag'n'drop ? jQuery UI, Interact, Draggabilly... ou bien du natif ?
Je te conseille d'utiliser une de ces librairies, elles sont bien feites et disposent de nombreux callbacks faciles à paramétrer.
Pour récupérer les valeurs il faut déclencher une action au drop (ou à la rigueur au dragend).

EDIT : j'avais pas vu ton titre... il est pas très clair, c'est une erreur PHP ou bien JS ?
Modifié par MatthieuR (08 May 2016 - 18:30)
merci mathieu_r merci encore pour le script que tu m'avais fait, mais j'ai décider de le faire moi meme car sinon je n'y arriverai jamais
, désoler de ne pas t'avoir répondu tout de suite, alors voici mon code refait,
le souci et la question que je me pose est comment récupérré le choix du drag quand on le dépose sur la zone drop(récupération des valeurs sur une autres page).
tous ce passe bien au niveau du drag n drop mais aucune récuppération.
je pense que je n'ai pas pris les bonnes balises ou les id.
  <?php
$reponses = array(
	'chx' => array(
		'reponse' => 'co',
		'mot' => 'un',
		'image' => 'img/colis.gif',
		'phrase' => 'lis'
	) ,
	'chx_1' => array(
		'reponse' => 'ca',
		'mot' => 'un',
		'image' => 'img/cafe.gif',
		'phrase' => 'fe'
	) ,
	'chx_2' => array(
		'reponse' => 'ki',
		'mot' => 'un',
		'image' => 'img/kiwi.gif',
		'phrase' => 'wi'
	) ,
	'chx_3' => array(
		'reponse' => 'qui',
		'mot' => 'une é',
		'image' => 'img/equipe.gif',
		'phrase' => 'pe'
	) ,
	'chx_4' => array(
		'reponse' => 'cu',
		'mot' => 'une',
		'image' => 'img/cuisine.gif',
		'phrase' => 'isine'
	) ,
	'chx_5' => array(
		'reponse' => 'que',
		'mot' => 'un cas',
		'image' => 'img/casque.gif',
		'phrase' => ''
	) ,
	'chx_6' => array(
		'reponse' => 'quette',
		'mot' => 'de la mo',
		'image' => 'img/moquette.gif',
		'phrase' => ''
	)
);
$choix = array(
	'co' => 'co',
	'ca' => 'ca',
	'ki' => 'ki',
	'qui' => 'qui',
	'cu' => 'cu',
	'que' => 'que',
	'quette' => 'quette'
);
echo '<form class="form_exercices_ou_result" action="correction_c_k_p.php" method="POST" />';
echo '<div style="display:inline;">';
foreach($choix as $key => $value)
	{

	echo '<p class="dropndrag" id="text_'.$key.'" draggable="true" ondragstart="drag(event)">'.$value.'</p>';
    }
        echo '</div>';
foreach($reponses as $cle => $reponse)
	{
	echo '<article class="content_img">';
	echo '<figure style="height:80px;margin-top:.1em;">';
	echo '<img  style="margin:0 0 0 -.5em;" src="' . $reponse['image'] . '" alt="' . $reponse['mot'] . '' . $reponse['phrase'] . '" width:"74" height="74" />';
	echo '</figure>';
	echo '<p>' . $reponse['mot'] . '</p><div style="display:inline-block;width:3em;height:20px;" id="text_'.$cle.'" ondrop="drop(event)" ondragover="allowDrop(event)"><input type="hidden" name="'.$cle.'" value="'.$reponse['reponse'].'" /></div><p style="margin:0;"> ' . $reponse['phrase'] . '</p>';
    echo'</article>';
	}

echo '<p class="correction_center"><input type="submit" name="correction" value="correction"/></p>';
echo '</form>';
?>
  <script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text_", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text_");
    ev.target.appendChild(document.getElementById(data));
}
</script>

merci pour vos réponses
$choix = array(
	'co' => 'co',
	'ca' => 'ca',
	'ki' => 'ki',
	'qui' => 'qui',
	'cu' => 'cu',
	'que' => 'que',
	'quette' => 'quette'
);


J'me suis arrêter là Smiley fou
JENCAL a écrit :
$choix = array(
	'co' =&gt; 'co',
	'ca' =&gt; 'ca',
	'ki' =&gt; 'ki',
	'qui' =&gt; 'qui',
	'cu' =&gt; 'cu',
	'que' =&gt; 'que',
	'quette' =&gt; 'quette'
);


J'me suis arrêter là Smiley fou

Cela m'avait interpellé aussi, la finalité de cette redondance clé / valeur m'échappant quelque peu Smiley cligne
JENCAL a écrit :
$choix = array(
	'co' => 'co',
	'ca' => 'ca',
	'ki' => 'ki',
	'qui' => 'qui',
	'cu' => 'cu',
	'que' => 'que',
	'quette' => 'quette'
);


J'me suis arrêter là Smiley fou

Ouais, ça m'a bien fait rire aussi Smiley lol
Modifié par MatthieuR (09 May 2016 - 18:09)
Sinon, boni75, le drag'n'drop c'est du Javascript que tu appelles directement dans tes balises et il manque le code de tes fonctions JS...
Tu ne réponds pas non plus à ma question qui est de savoir si tu utilises une librairie JS pour opérer le drag'n'drop ? Oui ou non ? Comprends-tu ce qui se passe quand tu dragues et ensuite quand tu droppes ?
bon franchement je n ai pas de librairie j ai juste pris un script sur internet que je ne comprend pas forcément ,désolé mais je dois absolument boucler ce dernier script pour pouvoir avancer sur le reste et cela m' enlèvera une épine du pied...pris par le temps je ne sais pas si ça vous est déjà arrivés, mais la je commence a désespéré...
drag: tu déplace un élément
drop: tu dépose un élément
franchement si j avais plus de réponse et pour vous vous êtes arrêté sur le tableau choix.
j essaye de comprendre
ou est ce que ça serai plus logique comme ça
$choix = array(
	'chx' => 'co',
	'chx_1' => 'ca',
	'chx_2' => 'ki',
	'chx_3' => 'qui',
	'chx_4' => 'cu',
	'chx_5' => 'que',
	'chx_6' => 'quette'
);
boni75 a écrit :
franchement si j avais plus de réponse et pour vous vous êtes arrêté sur le tableau choix.
j essaye de comprendre

Ton code :
$choix = array(
	'co' => 'co',
	'ca' => 'ca',
	'ki' => 'ki',
	'qui' => 'qui',
	'cu' => 'cu',
	'que' => 'que',
	'quette' => 'quette'
);

est pour le moins étrange dans la mesure où tu crées un tableau associatif clé / valeur dans lequel chaque clé à pour valeur la clé elle-même...
Ca ne t'interpelle pas ?
C'est aussi inutile que de créer une table des départements français de ce style :
$choix = array(
'01' => '01',
'02' => '02',
03' => '03'
etc...
);
Si tu as recopié le script depuis le web, il est peu probable qu'il comporte ce genre de tableau, ou alors le gars qui l'a mis en ligne doit encore progresser en matière de dictionnaire.
Est-ce que tu développes un site à titre personnel ou bien pour répondre à une commande ?
Si c'est à titre personnel, il est vivement conseillé d'approfondir la notion de tableau associatif et son usage.
Si c'est à titre commercial et que tu es pressé par les délais, c'est un peu inquiétant car cette notion devrait déjà être assimilée. C'est en effet l'une des bases de la programmation, tout langage confondu.
bon au moins ça c est dit, oui et non, mais c est vrai que j ai encore du mal sur les tableaux comme je pense beaucoup de débutants, ce que j aimerais comprendre c'est pourquoi?
est ce que ce tableau est inutile?
si oui pourquoi?
Ok, mais tu ne peux pas faire un truc que tu ne connais pas dans l'urgence et tu pars de pas grand chose là.
Pour être honnête, je ne comprends pas trop ce que tu veux faire exactement. Tu peux faire un petit croquis ou bien une page de ton script en ligne ou une démo sur Codepen ?
On sais pas trop ce qui fonctionne ou pas dans ton script.
Dans tous les cas, pour faire un système de Drag'n'drop performant et simple à développer, je peux te conseiller de te tourner vers interact.js avec des appels ajax dans les callbacks.
Bonjour,
MatthieuR a écrit :

Ouais, ça m'a bien fait rire aussi Smiley lol

Bon, je vois qu'il n'y a pas que moi...

Boni75, comme te l'a précisé plusieurs fois Matthieu, ne cherche pas à gérer le drag&drop de zéro.
Il y a plusieurs librairies qui permet de le gérer facilement, et il ne faut surtout pas s'en priver...
Au titre de débutant d'abord, mais même personnellement, je n'irais pas m'amuser à réinventer la roue pour ce genre de demande.