bonjours et bon dimanche à vous,

j'ai un problème avec le dragndrop, je vous explique:

j'ai dix choix que je doit déplacer dans un article avec images et en dessous de l'image le faire glisser dans une phrase , le souci est que le choix ce décale par rapport a la phrase et me demande aussi comment récupéré les valeurs par rapport aux réponses des phrases.

  <?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' => ''
	) 

);

foreach($reponses as $cle => $reponse)
	{
    echo '<form class="form_exercices_ou_result" action="correction_exo_ou_2.php" method="POST" />';
    echo'<p class="dropndrag" id="'.$cle.'" draggable="true" ondragstart="drag(event)">'.$reponse['reponse'].'</p>';
	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><p class="zone_drop" id="'.$cle.'" ondrop="drop(event)" ondragover="allowDrop(event)"></p>'.$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>

la je suis un peu perdu...