The next step is to capture the image locations when the form is submitted. This is done by storing the location of each image in hidden form fields. Each time an image is dragged and dropped, the relevant field is updated with the object’s position. For this to take effect, the view.php page needs to be updated with the input fields and additional JavaScript:

/// Print the main part of the page

$images = draganddrop_getimages($draganddrop->id);

echo(“<form method=\”post\” action=\”process.php\” name=\”myForm\”>”);

echo(“<input type=\”hidden\” name=\”course\” value=\””.$draganddrop->course.”\”>”);

echo(“<input type=\”hidden\” name=\”ddid\” value=\””.$draganddrop->id.”\”>”);

echo(“<input type=\”text\” name=\”image1\” value=1>”);

echo(“<input type=\”text\” name=\”image2\” value=2>”);

echo(“<input type=\”text\” name=\”image3\” value=3>”);

echo “<h1>”.$draganddrop->title.”</h1>”;

for($i=0;$i<sizeof($images);$i++){

echo “<img name=\””.$images[$i].”\” id=\””.$images[$i].

        “\” src=\””.$images[$i]. “\” width=\”240\” height=\”135\”>”;

}

echo “<br><br><input type=submit value=\”Submit!\”></form>”;

echo “<script type=\”text/javascript\” src=\”wz_dragdrop.js\”></script>”;

echo(“<script>\r\n”);

echo “SET_DHTML(CURSOR_MOVE, TRANSPARENT,\””.join(“\”,\””,$images).”\”);\r\n”;

echo “for (var i = 0; i < 3; i++)\r\n”;

echo “{\r\n”;

echo “    dd.elements[i].copy();\r\n”;

echo “    dd.elements[i].copies[0].hide();\r\n”;

echo “}\r\n”;

echo “function my_PickFunc()\r\n”;

echo “{\r\n”;

echo “    dd.obj.copies[0].moveTo(dd.obj.x, dd.obj.y);\r\n”;

echo “    dd.obj.copies[0].show();\r\n”;

echo “}\r\n”;

echo “function my_DropFunc()\r\n”;

echo “{\r\n”;

echo “    dd.obj.copies[0].hide();\r\n”;

echo “    if (dd.obj.name == ‘”.$images[0].”’){\r\n”;

echo “        document.myForm.image1.value = dd.obj.x;\r\n”;

echo “    }\r\n”;

echo “    if (dd.obj.name == ‘”.$images[1].”’){\r\n”;

echo “        document.myForm.image2.value = dd.obj.x;\r\n”;

echo “    }\r\n”;

echo “    if (dd.obj.name == ‘”.$images[2].”’){\r\n”;

echo “        document.myForm.image3.value = dd.obj.x;\r\n”;

echo “    }\r\n”;

echo “}\r\n”;

echo(“</script>\r\n”);