Chris Pollett > Students >

    ( Print View )


    [Project Blog]

    [CS 297 Proposal]

    [Intro to jQuery and YUI - PDF]

    [Deliverable 1]

    [Deliverable 2]

    [Deliverable 3]

    [Deliverable 4]

    [CS 297 Report - PDF]

    [CS 298 Proposal]

    [CS 298 Report - PDF]

    [CS 298 Slides - PPT]

    [CS 298 Codes - Zip]


Deliverable 1


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.


var next_id = 1;
var obj_prefix = 'obj';
function get_and_update_next_id()
  var next_obj = obj_prefix + 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>';
  $('#'+new_obj_id).draggable({ containment: 'document' });
  $('#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(); });
    drop: function(event, ui) {
      var obj_id = ui.draggable.attr('id');
      var resp = confirm("Are you sure you want to delete object "+obj_id);
        $('#'+obj_id).fadeOut('slow', function() {
          alert("You have just deleted object "+obj_id);
        // 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 });



Object creation form
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
The object deletion confirmation
Fig 3: The object deletion confirmation
The object has been deleted
Fig 4: The object has been deleted successfully

Relevant files