Question

我正在尝试创建一个Web应用程序，因此一旦将对象放置在“放置区”中，信息就会发布，然后被放置的对象将返回其原始位置。当前，当放下时，我设置了一个警报，以让我知道它已经放下了，无论如何都会得到警报，然后将对象重置到原始位置。我想确保在继续进行数据库连接之前可以实现这一目标。

该页面也无法刷新，我打算使用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

放置后将重置对象拖放到原始位置

0 个答案: