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).removeAttribute("draggable");
    _(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