Rico Drag & Drop with Custom Drag Class

var CustomDraggable = Class.create();

CustomDraggable.prototype = (new Rico.Draggable()).extend( {

   initialize: function( htmlElement, name ) {
      this.type        = 'Custom';
      this.htmlElement = $(htmlElement);
      this.name        = name;
   },

   select: function() {
      this.selected = true;
      var el = this.htmlElement;

      // show the item selected.....
      el.style.color           = "#ffffff";
      el.style.backgroundColor = "#08246b";
   },

   deselect: function() {
      this.selected = false;
      var el = this.htmlElement;
      el.style.color           = "#2b2b2b";
      el.style.backgroundColor = "transparent";
   },

   startDrag: function() {
      Rico.writeDebugMsg("startDrag: [" + this.name +"]");
   },

   cancelDrag: function() {
      Rico.writeDebugMsg("cancelDrag: [" + this.name +"]");
   },

   endDrag: function() {
      Rico.writeDebugMsg("endDrag: [" + this.name +"]");
   },

   getSingleObjectDragGUI: function() {
      var div = document.createElement("div");
      div.className = 'customDraggable';
      div.style.width = this.htmlElement.offsetWidth - 10;
      Element.insert(div,this.name);
      return div;
   },

   getDroppedGUI: function() {
      var div = document.createElement("div");
      var n=this.name
      if (CustomDraggable.reverseNamesOnDrop) {
        var names = n.split(",");
        n=names[1].substring(1) + " " + names[0];
      }
      Element.insert(div,"[" + n + "]");
      return div;
   }

} );