Перетащите объекты сброса в исходное положение после падения

Question

Я пытаюсь создать веб-приложение, чтобы после того, как объект был отброшен в «зоне сброса», информация была опубликована, а затем объект, который был отброшен, возвращается в исходное положение.В настоящее время при удалении у меня настроено оповещение, позволяющее мне знать, что оно было отброшено, так или иначе, чтобы получить оповещение, а затем сбросить объект в исходное положение.Я хочу убедиться, что это возможно, прежде чем двигаться дальше с подключением к базе данных.

Также страница не может обновиться. Я намерен использовать Ajax для публикации данных.

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