I'm trying to create a web app so once the object is dropped in the "dropzone" the information is posted then the object that was dropped returns to its original position. Currently when dropped I have an alert set up to let me knows it been dropped is there anyway to get the alert then reset the object to the original position. I want to ensure its possible to achieve this before moving forward with database connection.

Also the page cannot refresh I intend to use Ajax for posting the data.

function _(id){
   return document.getElementById(id);  
var droppedIn = false;
function drag_start(event) {
    _('app_status').innerHTML = "Dragging the "+event.target.getAttribute('id');
    event.dataTransfer.dropEffect = "move";
    event.dataTransfer.setData("text", event.target.getAttribute('id') );
function drag_enter(event) {
    _('app_status').innerHTML = "You are dragging over the "+event.target.getAttribute('id');

function drag_leave(event) {
    _('app_status').innerHTML = "You left the "+event.target.getAttribute('id');
function drag_drop(event) {
    event.preventDefault(); /* Prevent undesirable default behavior while dropping */
    var elem_id = event.dataTransfer.getData("text");
    event.target.appendChild( _(elem_id) );
    _('app_status').innerHTML = "Dropped "+elem_id+" into the "+event.target.getAttribute('id');
    _(elem_id).style.cursor = "default";
    droppedIn = true;


function drag_end(event) {
    if(droppedIn == false){
        _('app_status').innerHTML = "You let the "+event.target.getAttribute('id')+" go.";
    droppedIn = false;
function readDropZone(){
    for(var i=0; i < _("goal_zone").children.length; i++){
        alert(_("goal_zone").children[i].id+" has scored a goal");

    for(var i=0; i < _("point_zone").children.length; i++){
        alert(_("point_zone").children[i].id+" has scored a point");

      for(var i=0; i < _("foul_zone").children.length; i++){
        alert(_("foul_zone").children[i].id+" has committed a foul");

        for(var i=0; i < _("mark_zone").children.length; i++){
        alert(_("mark_zone").children[i].id+" has won a mark");

    /* Run Ajax request to pass any data to your server */

//There are 30objects split into two 15-a-side teams

0 Answers