Manipulating Dropped Elements

Manipulating Dropped Elements

Hi all, on one of my pages I have two divs, I'll call one of them toolbars and the other designSurface. The toolbar div contains four thumb nails which can be dragged and dropped into the DesignSurface div. I was able to drag and drop the thumbnail image of a grid which represents an HTML table from the toolbar div into the designSurface div.

Upon dropping the image,  my javascript function was able to create an HTML markup for my table and give it a background color, a uniqe Id, and dimensions. The problem I have is I cannot change its color or resize it after it is created. the following are my drop code.

$('#designSurface').droppable({hover:'border',accept:'img',
      drop:function(event,ui){
          var obj_id = $(ui.draggable).attr('id');
       
          $('#designSurface').append($(contents));
          $( obj_id ).attr('style','background-color:red');
      }
  });

Please help me to modify my new objects which are created when their associated thumbnails are dropped into the designSurface div. Any help is greatly appreciated, thanks in advance.