Deliverable 1

Goals

The goals of this deliverable are:

To create a simple HTML page that demonstrates the drag-and-drop feature of jQuery framework
To experiment with other features of jQuery framework (for example: simple animation)

Description of the application

Upon entering the main page (dragdrop.html), user will be presented with a button to create new objects. When the user clicks that button, a simple form will pop up. User can specify the color and the message of the object by entering them in the form. Once the user hits the create button, a simple box will be created. The box will have the color and the message that the user has specified in the form. User can also drag the boxes around the screen.

Users can also delete any of the boxes that they have created. To delete a box, user will drag the box and drops it in the Trash Div. When user drops the box in Trash Div, the browser will confirm the deletion request with the user. If user cancels it, then the box will not be deleted. If user clicks on ok, the box will be deleted (in slow animation style). The browser will alert the user that the box has been deleted successfully.

Implementation


var next_id = 1;
var obj_prefix = 'obj';
function get_and_update_next_id()
{
  var next_obj = obj_prefix + next_id;
  next_id++;
  return next_obj;
}
function add_new_obj(obj_color, obj_msg)
{
  if(obj_color == '')
    obj_color = '#0000FF;';
  if(obj_msg == '')
    obj_msg = 'Put msg here';
  var new_obj_id = get_and_update_next_id();
  var new_obj_div = '<div id="'+new_obj_id+'" class="obj" style="background-color:'+obj_color+'">'+obj_msg+'</div>';
  $('#draggable_area').append(new_obj_div);
  $('#'+new_obj_id).draggable({ containment: 'document' });
}
$(document).ready(function(){
  $('#new_obj_form').hide();
  $('#show_obj_form').bind('click', function (event) { $('#new_obj_form').show(); });
  $('#create_obj').bind('click', function (event) { 
    add_new_obj($('#new_obj_form #obj_color').val(), $('#new_obj_form #obj_msg').val()), $('#new_obj_form').hide();
  });
  $('#cancel_create_obj').bind('click', function(event) { $('#new_obj_form').hide(); });
  $("#trash_bin").droppable({
    drop: function(event, ui) {
      var obj_id = ui.draggable.attr('id');
      var resp = confirm("Are you sure you want to delete object "+obj_id);
      if(resp)
      {
        $('#'+obj_id).fadeOut('slow', function() {
          $('#'+obj_id).remove();
          alert("You have just deleted object "+obj_id);
        });
      }
      else
      {
        // Take object out of the trash div
        var current_top = $('#'+obj_id).offset().top;
        var current_left = $('#'+obj_id).offset().left;
        $('#'+obj_id).offset( { top: current_top + 70, left: current_left });
      }
    }
  });
});

Snapshots

Fig 1: The form that the user will fill to create an object

The object that has been created by user

Fig 2: The object (in a form of box) that has been created by user

Fig 3: The object deletion confirmation

Fig 4: The object has been deleted successfully

Relevant files

Source code + power point presentation [.zip file]